assets/webapp: Add code highlighting support in Markdown rendering

package.json

@@ -29,6 +29,7 @@
     "font-awesome": "^4.7.0",
     "highlight.js": "^9.15.8",
     "highlightjs-line-numbers.js": "^2.7.0",
+    "html-encoder-decoder": "^1.3.8",
     "iframe-resizer": "^4.1.1",
     "jquery": "^3.4.1",
     "js-cookie": "^2.2.0",

swh/web/assets/src/bundles/webapp/readme-rendering.js

@@ -7,12 +7,51 @@
 
 import {handleFetchError} from 'utils/functions';
 
+import {decode} from 'html-encoder-decoder';
+
 export async function renderMarkdown(domElt, markdownDocUrl) {
 
   let showdown = await import(/* webpackChunkName: "showdown" */ 'utils/showdown');
+  await import(/* webpackChunkName: "highlightjs" */ 'utils/highlightjs');
+
+  // Adapted from https://github.com/Bloggify/showdown-highlight
+  // Copyright (c) 2016-19 Bloggify <support@bloggify.org> (https://bloggify.org)
+  function showdownHighlight() {
+    return [{
+      type: 'output',
+      filter: function(text, converter, options) {
+        let left = '<pre><code\\b[^>]*>';
+        let right = '</code></pre>';
+        let flags = 'g';
+        let classAttr = 'class="';
+        let replacement = (wholeMatch, match, left, right) => {
+          match = decode(match);
+          let lang = (left.match(/class="([^ "]+)/) || [])[1];
+
+          if (left.includes(classAttr)) {
+            let attrIndex = left.indexOf(classAttr) + classAttr.length;
+            left = left.slice(0, attrIndex) + 'hljs ' + left.slice(attrIndex);
+          } else {
+            left = left.slice(0, -1) + ' class="hljs">';
+          }
+
+          if (lang && hljs.getLanguage(lang)) {
+            return left + hljs.highlight(lang, match).value + right;
+          } else {
+            return left + hljs.highlightAuto(match).value + right;
+          }
+        };
+
+        return showdown.helper.replaceRecursiveRegExp(text, replacement, left, right, flags);
+      }
+    }];
+  }
 
   $(document).ready(() => {
-    let converter = new showdown.Converter({tables: true});
+    let converter = new showdown.Converter({
+      tables: true,
+      extensions: [showdownHighlight]
+    });
     fetch(markdownDocUrl)
       .then(handleFetchError)
       .then(response => response.text())

yarn.lock

@@ -4527,6 +4527,11 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+he@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
@@ -4588,6 +4593,15 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
+html-encoder-decoder@^1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.8.tgz#86c25e0413237a681097f781bbd5b1c43c82d883"
+  integrity sha512-H5GJwy7y9jVpc1lrMLwQy8As0IiyLKy0TibpYX3DdpLD03MxmZnO97S9KXkvmKtMdbZo9jF1fmS+Fkx+61D5/w==
+  dependencies:
+    he "^1.1.0"
+    iterate-object "^1.3.2"
+    regex-escape "^3.4.2"
+
 html-encoding-sniffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
@@ -5293,6 +5307,11 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+iterate-object@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/iterate-object/-/iterate-object-1.3.3.tgz#c58e60f7f0caefa2d382027a484b215988a7a296"
+  integrity sha512-DximWbkke36cnrSfNJv6bgcB2QOMV9PRD2FiowwzCoMsh8RupFLdbNIzWe+cVDWT+NIMNJgGlB1dGxP6kpzGtA==
+
 jquery-ui@^1.12.1:
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.12.1.tgz#bcb4045c8dd0539c134bc1488cdd3e768a7a9e51"
@@ -7856,6 +7875,11 @@ regenerator-transform@^0.14.0:
   dependencies:
     private "^0.1.6"
 
+regex-escape@^3.4.2:
+  version "3.4.9"
+  resolved "https://registry.yarnpkg.com/regex-escape/-/regex-escape-3.4.9.tgz#407b413562e2373d56994ff213e693658ea4f8f7"
+  integrity sha512-Cv9rjwyQwVhn3L097ysanWsEElurmxDj6Cc4Ut23z7e6hzRbrNvF3Le7yAciMfuzyb0sZwSr0ZHunMNCIoy2/g==
+
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"