Add mergeHTMLPlugin plugin for hljs

Author: slav0nic

package.json

@@ -26,7 +26,7 @@
     "bootstrap-multiselect": "1.1.0",
     "bootstrap-sass": "^3.3.6",
     "font-awesome": "^4.7.0",
-    "highlight.js": "^11.7.0",
+    "highlight.js": "^11.10.0",
     "isotope-layout": "^3.0.0",
     "jquery": "~3.6.3",
     "jquery-bridget": "^3.0.1"

src/lib/highlightjs-merge-html.js

@@ -0,0 +1,194 @@
+// From https://github.com/highlightjs/highlight.js/issues/2889#issue-748412174
+// Copyright (c) 2006, Ivan Sagalaev. BSD-3-Clause License
+
+var mergeHTMLPlugin = (function () {
+
+  var originalStream;
+
+  /**
+   * @param {string} value
+   * @returns {string}
+   */
+  function escapeHTML(value) {
+    return value
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/'/g, '&quot;')
+      .replace(/'/g, '&#x27;');
+  }
+
+  /* plugin itself */
+
+  /** @type {HLJSPlugin} */
+  const mergeHTMLPlugin = {
+    // preserve the original HTML token stream
+    'before:highlightElement': ({ el }) => {
+      originalStream = nodeStream(el);
+    },
+    // merge it afterwards with the highlighted token stream
+    'after:highlightElement': ({ el, result, text }) => {
+      if (!originalStream.length) return;
+
+      const resultNode = document.createElement('div');
+      resultNode.innerHTML = result.value;
+      result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
+      el.innerHTML = result.value;
+    },
+  };
+
+  /* Stream merging support functions */
+
+  /**
+   * @typedef Event
+   * @property {'start'|'stop'} event
+   * @property {number} offset
+   * @property {Node} node
+   */
+
+  /**
+   * @param {Node} node
+   */
+  function tag(node) {
+    return node.nodeName.toLowerCase();
+  }
+
+  /**
+   * @param {Node} node
+   */
+  function nodeStream(node) {
+    /** @type Event[] */
+    const result = [];
+    (function _nodeStream(node, offset) {
+      for (let child = node.firstChild; child; child = child.nextSibling) {
+        if (child.nodeType === 3) {
+          offset += child.nodeValue.length;
+        } else if (child.nodeType === 1) {
+          result.push({
+            event: 'start',
+            offset: offset,
+            node: child,
+          });
+          offset = _nodeStream(child, offset);
+          // Prevent void elements from having an end tag that would actually
+          // double them in the output. There are more void elements in HTML
+          // but we list only those realistically expected in code display.
+          if (!tag(child).match(/br|hr|img|input/)) {
+            result.push({
+              event: 'stop',
+              offset: offset,
+              node: child,
+            });
+          }
+        }
+      }
+      return offset;
+    })(node, 0);
+    return result;
+  }
+
+  /**
+   * @param {any} original - the original stream
+   * @param {any} highlighted - stream of the highlighted source
+   * @param {string} value - the original source itself
+   */
+  function mergeStreams(original, highlighted, value) {
+    let processed = 0;
+    let result = '';
+    const nodeStack = [];
+
+    function selectStream() {
+      if (!original.length || !highlighted.length) {
+        return original.length ? original : highlighted;
+      }
+      if (original[0].offset !== highlighted[0].offset) {
+        return original[0].offset < highlighted[0].offset
+          ? original
+          : highlighted;
+      }
+
+      /*
+      To avoid starting the stream just before it should stop the order is
+      ensured that original always starts first and closes last:
+ 
+      if (event1 == 'start' && event2 == 'start')
+        return original;
+      if (event1 == 'start' && event2 == 'stop')
+        return highlighted;
+      if (event1 == 'stop' && event2 == 'start')
+        return original;
+      if (event1 == 'stop' && event2 == 'stop')
+        return highlighted;
+ 
+      ... which is collapsed to:
+      */
+      return highlighted[0].event === 'start' ? original : highlighted;
+    }
+
+    /**
+     * @param {Node} node
+     */
+    function open(node) {
+      /** @param {Attr} attr */
+      function attributeString(attr) {
+        return ' ' + attr.nodeName + '="' + escapeHTML(attr.value) + '"';
+      }
+      // @ts-ignore
+      result +=
+        '<' +
+        tag(node) +
+        [].map.call(node.attributes, attributeString).join('') +
+        '>';
+    }
+
+    /**
+     * @param {Node} node
+     */
+    function close(node) {
+      result += '</' + tag(node) + '>';
+    }
+
+    /**
+     * @param {Event} event
+     */
+    function render(event) {
+      (event.event === 'start' ? open : close)(event.node);
+    }
+
+    while (original.length || highlighted.length) {
+      let stream = selectStream();
+      result += escapeHTML(value.substring(processed, stream[0].offset));
+      processed = stream[0].offset;
+      if (stream === original) {
+        /*
+        On any opening or closing tag of the original markup we first close
+        the entire highlighted node stack, then render the original tag along
+        with all the following original tags at the same offset and then
+        reopen all the tags on the highlighted stack.
+        */
+        nodeStack.reverse().forEach(close);
+        do {
+          render(stream.splice(0, 1)[0]);
+          stream = selectStream();
+        } while (
+          stream === original &&
+          stream.length &&
+          stream[0].offset === processed
+        );
+        nodeStack.reverse().forEach(open);
+      } else {
+        if (stream[0].event === 'start') {
+          nodeStack.push(stream[0].node);
+        } else {
+          nodeStack.pop();
+        }
+        render(stream.splice(0, 1)[0]);
+      }
+    }
+    return result + escapeHTML(value.substr(processed));
+  }
+
+  return mergeHTMLPlugin;
+})();
+
+export default mergeHTMLPlugin;

src/main.js

@@ -135,10 +135,16 @@ require('./img/warehouse-pypi-logo.png');
 require('./img/websauna-logo.png');
 require('./img/yelp-logo.png');
 require('./img/zopyx-logo.png');
+require('./lib/highlightjs-merge-html.js')
 
-const hljs = require('highlight.js');
+import mergeHTMLPlugin from './lib/highlightjs-merge-html.js';
 
-hljs.initHighlightingOnLoad();
+const hljs = require('highlight.js');
+hljs.configure({
+  ignoreUnescapedHTML: true,
+});
+hljs.addPlugin(mergeHTMLPlugin);
+hljs.highlightAll();
 
 if ($('.home').length){
   $(window).scroll(function() {

yarn.lock

@@ -3396,10 +3396,10 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-highlight.js@^11.7.0:
-  version "11.7.0"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.7.0.tgz#3ff0165bc843f8c9bce1fd89e2fda9143d24b11e"
-  integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
+highlight.js@^11.10.0:
+  version "11.10.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.10.0.tgz#6e3600dc4b33d6dc23d5bd94fbf72405f5892b92"
+  integrity sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==
 
 hosted-git-info@^2.1.4:
   version "2.8.9"