Replace custom extension with marked-katex-extension

- Add a visual test to check math rendering

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

package-lock.json

@@ -17,9 +17,9 @@
         "dompurify": "^3.0.4",
         "hast-util-to-dom": "^3.1.1",
         "hast-util-to-html": "^8.0.4",
-        "katex": "^0.16.8",
         "lodash": "^4.17.21",
         "marked": "^5.1.0",
+        "marked-katex-extension": "^3.0.0",
         "md5": "^2.3.0",
         "plausible-tracker": "^0.3.8",
         "sinon": "^15.2.0",
@@ -826,8 +826,7 @@
     "node_modules/@types/katex": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.0.tgz",
-      "integrity": "sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw==",
-      "dev": true
+      "integrity": "sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw=="
     },
     "node_modules/@types/lodash": {
       "version": "4.14.195",
@@ -3079,6 +3078,18 @@
         "node": ">= 18"
       }
     },
+    "node_modules/marked-katex-extension": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/marked-katex-extension/-/marked-katex-extension-3.0.0.tgz",
+      "integrity": "sha512-zaSO2LGwq8xI2QgGfLqHSiMFFj3l+7vq520DZ+mnD5jeq6iF8w/JtUfIUPVxi3gmpkcJVOBSpaN0b2Wosn2dzA==",
+      "dependencies": {
+        "@types/katex": "^0.16.0",
+        "katex": "^0.16.8"
+      },
+      "peerDependencies": {
+        "marked": "^4 || ^5"
+      }
+    },
     "node_modules/md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",

package.json

@@ -60,9 +60,9 @@
     "dompurify": "^3.0.4",
     "hast-util-to-dom": "^3.1.1",
     "hast-util-to-html": "^8.0.4",
-    "katex": "^0.16.8",
     "lodash": "^4.17.21",
     "marked": "^5.1.0",
+    "marked-katex-extension": "^3.0.0",
     "md5": "^2.3.0",
     "plausible-tracker": "^0.3.8",
     "sinon": "^15.2.0",

src/lib/markdown.ts

@@ -1,10 +1,11 @@
 import type { marked } from "marked";
 
 import dompurify from "dompurify";
-import emojis from "@app/lib/emojis";
-import katex from "katex";
+import katexMarkedExtension from "marked-katex-extension";
 import { Marked, Renderer as BaseRenderer } from "marked";
 
+import emojis from "@app/lib/emojis";
+
 dompurify.setConfig({
   // eslint-disable-next-line @typescript-eslint/naming-convention
   SANITIZE_DOM: false,
@@ -30,25 +31,6 @@ const emojisMarkedExtension = {
     `<span>${token.text in emojis ? emojis[token.text] : token.text}</span>`,
 };
 
-const katexMarkedExtension = {
-  name: "katex",
-  level: "inline",
-  start: (src: string) => src.indexOf("$"),
-  tokenizer(src: string) {
-    const match = src.match(/^\$+([^$\n]+?)\$+/);
-    if (match) {
-      return {
-        type: "katex",
-        raw: match[0],
-        text: match[1].trim(),
-      };
-    }
-  },
-  renderer: (token: marked.Tokens.Generic): string =>
-    katex.renderToString(token.text, {
-      throwOnError: false,
-    }),
-};
 const footnotePrefix = "marked-fn";
 const referencePrefix = "marked-fnref";
 const referenceMatch = /^\[\^([^\]]+)\](?!\()/;
@@ -158,17 +140,19 @@ export class Renderer extends BaseRenderer {
   }
 }
 
-const markedInstance = new Marked({
-  extensions: [
-    emojisMarkedExtension,
-    katexMarkedExtension,
-    footnoteMarkedExtension,
-    footnoteReferenceMarkedExtension,
-    anchorMarkedExtension,
-  ],
-  // TODO: Disables deprecated options, remove once removed from marked
-  mangle: false,
-  headerIds: false,
-});
+const markedInstance = new Marked(
+  katexMarkedExtension({ throwOnError: false }),
+  {
+    extensions: [
+      emojisMarkedExtension,
+      footnoteMarkedExtension,
+      footnoteReferenceMarkedExtension,
+      anchorMarkedExtension,
+    ],
+    // TODO: Disables deprecated options, remove once removed from marked
+    mangle: false,
+    headerIds: false,
+  },
+);
 
 export default markedInstance;

tests/visual/markdown.spec.ts

@@ -117,6 +117,18 @@ test.describe("markdown rendering", async () => {
     });
   });
 
+  test.describe(async () => {
+    test("math", async ({ page }) => {
+      await page.goto(`${markdownUrl}/tree/main/math.md`, {
+        waitUntil: "networkidle",
+      });
+      await expect(
+        page.getByText("The Cauchy-Schwarz Inequality"),
+      ).toBeVisible();
+      await expect(page).toHaveScreenshot({ fullPage: true });
+    });
+  });
+
   test.describe(async () => {
     test.use({ viewport: { width: viewportWidth, height: 1100 } });
     test("tables", async ({ page }) => {