fix: Update highlight.js code

src/ui/js/diff2html-ui-base.ts

@@ -1,6 +1,5 @@
 import * as HighlightJS from 'highlight.js/lib/core';
-// import { CompiledMode, HighlightResult, AutoHighlightResult } from 'highlight.js/lib/core.js';
-import { nodeStream, mergeStreams } from './highlight.js-helpers';
+import { closeTags, nodeStream, mergeStreams } from './highlight.js-helpers';
 
 import { html, Diff2HtmlConfig, defaultDiff2HtmlConfig } from '../../diff2html';
 import { DiffFile } from '../../types';
@@ -145,9 +144,6 @@ export class Diff2HtmlUI {
     // Collect all the diff files and execute the highlight on their lines
     const files = this.targetElement.querySelectorAll('.d2h-file-wrapper');
     files.forEach(file => {
-      let oldLinesState: CompiledMode | Language | undefined;
-      let newLinesState: CompiledMode | Language | undefined;
-
       // Collect all the code lines and execute the highlight on them
       const codeLines = file.querySelectorAll('.d2h-code-line-ctn');
       codeLines.forEach(line => {
@@ -159,24 +155,15 @@ export class Diff2HtmlUI {
 
         if (text === null || lineParent === null || !this.isElement(lineParent)) return;
 
-        const lineState = lineParent.classList.contains('d2h-del') ? oldLinesState : newLinesState;
-
-        const language = file.getAttribute('data-lang');
-        const result: HighlightResult =
-          language && this.hljs.getLanguage(language)
-            ? this.hljs.highlight(language, text, true, lineState)
-            : this.hljs.highlightAuto(text);
-
-        if (this.instanceOfHighlightResult(result)) {
-          if (lineParent.classList.contains('d2h-del')) {
-            oldLinesState = result.top;
-          } else if (lineParent.classList.contains('d2h-ins')) {
-            newLinesState = result.top;
-          } else {
-            oldLinesState = result.top;
-            newLinesState = result.top;
-          }
-        }
+        const language = file.getAttribute('data-lang') || 'plaintext';
+        const result: HighlightResult = this.hljs.getLanguage(language)
+          ? closeTags(
+              this.hljs.highlight(text, {
+                language,
+                ignoreIllegals: true,
+              }),
+            )
+          : closeTags(this.hljs.highlightAuto(text));
 
         const originalStream = nodeStream(line);
         if (originalStream.length) {
@@ -201,10 +188,6 @@ export class Diff2HtmlUI {
     console.warn('Smart selection is now enabled by default with CSS. No need to call this method anymore.');
   }
 
-  private instanceOfHighlightResult(object: HighlightResult | AutoHighlightResult): object is HighlightResult {
-    return 'top' in object;
-  }
-
   private getHashTag(): string | null {
     const docUrl = document.URL;
     const hashTagIndex = docUrl.indexOf('#');

src/ui/js/highlight.js-helpers.ts

@@ -135,3 +135,24 @@ export function mergeStreams(original: NodeEvent[], highlighted: NodeEvent[], va
 
   return result + escapeHTML(value.substr(processed));
 }
+
+// https://github.com/hexojs/hexo-util/blob/979873b63a725377c2bd6ad834d790023496130d/lib/highlight.js#L123
+export function closeTags(res: HighlightResult): HighlightResult {
+  const tokenStack = new Array<string>();
+
+  res.value = res.value
+    .split('\n')
+    .map(line => {
+      const prepend = tokenStack.map(token => `<span class="${token}">`).join('');
+      const matches = line.matchAll(/(<span class="(.*?)">|<\/span>)/g);
+      Array.from(matches).forEach(match => {
+        if (match[0] === '</span>') tokenStack.shift();
+        else tokenStack.unshift(match[2]);
+      });
+      const append = '</span>'.repeat(tokenStack.length);
+      return prepend + line + append;
+    })
+    .join('\n');
+
+  return res;
+}

tsconfig.json

@@ -4,7 +4,7 @@
     "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",
-    "lib": ["es2015", "dom"],
+    "lib": ["es2020", "dom"],
     "allowJs": false,
     "declaration": true,
     "declarationMap": true,