feat(md): support math with katex

alist-org · Jul 4, 2023 · d12c378 · d12c378
1 parent cb7e913
commit d12c378
Show file tree

Hide file tree

Showing 4 changed files with 1,243 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -62,8 +62,10 @@
     "hls.js": "^1.2.1",
     "lightgallery": "^2.5.0",
     "mitt": "^3.0.0",
+    "rehype-katex": "^6.0.3",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
     "seemly": "^0.3.6",
     "solid-contextmenu": "0.0.2",
     "solid-icons": "^1.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
@@ -3,7 +3,10 @@ import { hljs } from "./highlight.js"
 import SolidMarkdown from "solid-markdown"
 import remarkGfm from "remark-gfm"
 import rehypeRaw from "rehype-raw"
+import reMarkMath from "remark-math"
+import rehypeKatex from "rehype-katex"
 import "./markdown.css"
+import "./katex.css"
 import { onMount } from "solid-js"
 import { clsx } from "clsx"
 
@@ -14,8 +17,8 @@ export const Markdown = (props: { children?: string; class?: string }) => {
   return (
     <SolidMarkdown
       class={clsx("markdown-body", props.class)}
-      remarkPlugins={[remarkGfm]}
-      rehypePlugins={[rehypeRaw]}
+      remarkPlugins={[remarkGfm, reMarkMath]}
+      rehypePlugins={[rehypeRaw, rehypeKatex]}
       children={props.children}
     />
   )