feat: add latex math support

arian81 · Jun 9, 2024 · 12504dc · 12504dc
1 parent 7e6684a
commit 12504dc
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,9 @@
     "react-dom": "18.2.0",
     "react-markdown": "^9.0.1",
     "rehype-highlight": "^7.0.0",
+    "rehype-katex": "^7.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "sanity": "^3.25.0",
     "sanity-plugin-markdown": "^4.1.2",
     "styled-components": "^6.1.8",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
@@ -13,6 +13,8 @@ import ImageModal from "~/components/ImageModal";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
 
 const markdown =
   "``` js\nvar foo = function (bar) {\n  return bar++;\n};\n\nconsole.log(foo(5));\n ```\n Just a link: www.nasa.gov.";
@@ -37,8 +39,8 @@ const BlogPost: NextPageWithLayout<
         < */}
         <div className="prose w-screen p-5">
           <Markdown
-            remarkPlugins={[remarkGfm]}
-            rehypePlugins={[rehypeHighlight]}
+            remarkPlugins={[remarkGfm, remarkMath]}
+            rehypePlugins={[rehypeHighlight, rehypeKatex]}
           >
             {post.body}
           </Markdown>