feat: add KaTeX support and change rehypeKatex output format to 'html'

athrael-soju · Jan 20, 2025 · 6b0f627 · 6b0f627
1 parent acac97c
commit 6b0f627
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/components/markdown.tsx b/components/markdown.tsx
@@ -1,3 +1,4 @@
+import 'katex/dist/katex.min.css';
 import Link from 'next/link';
 import React, { memo, useMemo, useState } from 'react';
 import ReactMarkdown, { type Components } from 'react-markdown';
@@ -106,7 +107,7 @@ const NonMemoizedMarkdown = ({ children }: { children: string }) => {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
-      rehypePlugins={[[rehypeKatex, { output: 'markdown' }]]}
+      rehypePlugins={[[rehypeKatex, { output: 'html' }]]}
       components={components}
     >
       {processedText}

diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^11.3.19",
     "geist": "^1.3.1",
+    "katex": "^0.16.21",
     "lucide-react": "^0.446.0",
     "nanoid": "^5.0.9",
     "next": "15.0.3-canary.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml