Update Marked

Diagram rendering should be fixed, the SVG source code is now displayed instead of the image.
fumiX · Jun 20, 2024 · 0ae80c7 · 0ae80c7
1 parent 38410a8
commit 0ae80c7
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 132 deletions.
diff --git a/client/package.json b/client/package.json
@@ -37,7 +37,7 @@
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.14.6",
     "@unhead/vue": "^1.1.26",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",

diff --git a/common/package.json b/common/package.json
@@ -12,18 +12,18 @@
   "dependencies": {
     "dompurify": "^3.0.1",
     "highlight.js": "^11.9.0",
-    "jsdom": "^22.1.0",
-    "marked": "^5.0.2",
-    "marked-highlight": "^2.0.1",
-    "marked-mangle": "^1.0.1",
+    "jsdom": "^24.1.0",
+    "marked": "^13.0.0",
+    "marked-highlight": "^2.1.3",
+    "marked-mangle": "^1.1.8",
     "node-fetch": "^3.3.1",
     "pako": "2.1.0",
     "sha.js": "^2.4.11"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.0",
     "@types/jsdom": "^21.1.1",
-    "@types/marked": "^5.0.0",
+    "@types/marked": "^6.0.0",
     "@types/node": "^20.14.6",
     "@types/node-fetch": "^2.6.2",
     "@types/pako": "^2.0.0",

diff --git a/common/src/markdown-converter-common.ts b/common/src/markdown-converter-common.ts
@@ -2,7 +2,7 @@ import { DataUrl } from "@common/util/base64.js";
 import { Buffer } from "buffer";
 import { DOMPurifyI } from "dompurify";
 import highlightjs from "highlight.js";
-import { marked } from "marked";
+import { marked, MarkedExtension, Token, Tokens } from "marked";
 import { markedHighlight } from "marked-highlight";
 import { mangle } from "marked-mangle";
 import pako from "pako";
@@ -62,21 +62,21 @@ export abstract class MarkdownConverter {
       : this.KROKI_SVG_DIAGRAM_TYPES.find((it) => it.markdownId === markdownId) ?? undefined;
   }
 
-  private static rendererExtension: marked.MarkedExtension = {
+  private static rendererExtension: MarkedExtension = {
     renderer: {
-      code(code: string, infostring: string) {
-        if (MarkdownConverter.getKrokiDiagramTypeFromMarkdownId(infostring)) {
-          return code;
+      code({ text, lang, escaped }: Tokens.Code) {
+        if (MarkdownConverter.getKrokiDiagramTypeFromMarkdownId(lang)) {
+          return text;
         }
         return false;
       },
     },
   };
-  private static walkTokensExtension: (fetchTextFromUrl: FetchTextFromUrlFunction) => marked.MarkedExtension = //
+  private static walkTokensExtension: (fetchTextFromUrl: FetchTextFromUrlFunction) => MarkedExtension = //
     (fetchTextFromUrl) => {
       return {
         async: true,
-        walkTokens: async (token: marked.Token) => {
+        walkTokens: async (token: Token) => {
           if (token.type === "code") {
             const diagramType = MarkdownConverter.getKrokiDiagramTypeFromMarkdownId(token.lang);
             if (diagramType) {
@@ -110,13 +110,16 @@ export abstract class MarkdownConverter {
     marked.use(MarkdownConverter.rendererExtension);
     marked.use(
       markedHighlight({
-        highlight: function (code: string, lang: string) {
-          return highlightjs.highlightAuto(code).value;
+        highlight: function (code: string, language: string, info: string): string {
+          if (!language || !language.startsWith("diagram-")) {
+            return highlightjs.highlightAuto(code).value;
+          } else {
+            return code;
+          }
         },
       }),
     );
     marked.use(mangle());
-    marked.use({ headerIds: false });
   }
 
   private f: ImageHashToUrlFunction | undefined;