diff --git a/package-lock.json b/package-lock.json index ff91c236f..0ee8f072c 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f5dc5b88b..a241c48d7 100644 --- a/package.json +++ b/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", diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts index d1eaf0db8..455d8e286 100644 --- a/src/lib/markdown.ts +++ b/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 = { `${token.text in emojis ? emojis[token.text] : token.text}`, }; -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; diff --git a/tests/fixtures/repos/markdown.tar.bz2 b/tests/fixtures/repos/markdown.tar.bz2 index 076dad1a8..7c086a472 100644 Binary files a/tests/fixtures/repos/markdown.tar.bz2 and b/tests/fixtures/repos/markdown.tar.bz2 differ diff --git a/tests/visual/markdown.spec.ts b/tests/visual/markdown.spec.ts index db814383a..b0d9099f6 100644 --- a/tests/visual/markdown.spec.ts +++ b/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 }) => {