chore: support for KaTex

app/(editor)/edit/[id]/page.tsx

@@ -64,9 +64,9 @@ export default function page({ params }: { params: { id: string } }) {
       const response = await fetch(`/api/user/eligible-for-ai`, {
         method: "GET",
         next: {
-          revalidate: 0
+          revalidate: 0,
         },
-        cache: "no-store"
+        cache: "no-store",
       })
       const resJson = await response.json()
       setIsEligibleForAI(resJson.isEligibleForAI)

components/editor/parse-markdown.tsx

@@ -1,10 +1,15 @@
 import React from "react"
 import ReactMarkdown from "react-markdown"
 import rehypeAutolinkHeadings from "rehype-autolink-headings"
+import rehypeKatex from "rehype-katex"
 import rehypeRaw from "rehype-raw"
 import rehypeSlug from "rehype-slug"
 import remarkEmoji from "remark-emoji"
 import remarkGfm from "remark-gfm"
+import remarkMath from "remark-math"
+
+import "katex/dist/katex.min.css"
+// KaTeX CSS
 
 import { cn } from "@/lib/utils"
 
@@ -137,23 +142,20 @@ function ParseMarkdown({
       className,
       ...props
     }: React.HTMLAttributes<HTMLTableElement>) => (
-      <div className="my-6 w-full rounded-lg">
+      <div className="my-6 w-full overflow-hidden rounded-lg border">
         <table className={cn("w-full", className)} {...props} />
       </div>
     ),
     tr: ({
       className,
       ...props
     }: React.HTMLAttributes<HTMLTableRowElement>) => (
-      <tr
-        className={cn("m-0 border-t p-0 even:bg-muted", className)}
-        {...props}
-      />
+      <tr className={cn("m-0  p-0", className)} {...props} />
     ),
     th: ({ className, ...props }: ComponentTypes) => (
       <th
         className={cn(
-          "border px-4 py-2 text-left font-bold  [&[align=center]]:text-center [&[align=right]]:text-right",
+          " px-4 py-2 text-left font-semibold  [&[align=center]]:text-center [&[align=right]]:text-right",
           className
         )}
         {...props}
@@ -162,7 +164,7 @@ function ParseMarkdown({
     td: ({ className, ...props }: ComponentTypes) => (
       <td
         className={cn(
-          "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+          "border-t px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
           className
         )}
         {...props}
@@ -203,8 +205,14 @@ function ParseMarkdown({
 
   return (
     <ReactMarkdown
-      remarkPlugins={[remarkGfm, remarkEmoji]}
-      rehypePlugins={[rehypeRaw, rehypeSlug, rehypeAutolinkHeadings]}
+      remarkPlugins={[remarkGfm, remarkEmoji, remarkMath]}
+      rehypePlugins={[
+        rehypeRaw,
+        rehypeSlug,
+        rehypeAutolinkHeadings,
+        // @ts-ignore
+        rehypeKatex,
+      ]}
       components={components}
       className={cn("markdown", className)}
     >

package.json

@@ -57,6 +57,7 @@
     "install": "^0.13.0",
     "ioredis": "^5.3.2",
     "jotai": "^2.1.0",
+    "katex": "^0.16.9",
     "lucide-react": "^0.214.0",
     "marked": "^5.0.2",
     "monaco-editor": "^0.38.0",
@@ -77,10 +78,12 @@
     "react-textarea-autosize": "^8.5.3",
     "react-wrap-balancer": "^1.1.0",
     "rehype-autolink-headings": "^6.1.1",
+    "rehype-katex": "^7.0.0",
     "rehype-raw": "^6.1.1",
     "rehype-slug": "^5.1.0",
     "remark-emoji": "^3.1.1",
     "remark-gfm": "^3.0.1",
+    "remark-math": "^6.0.0",
     "resend": "^1.1.0",
     "server-only": "^0.0.1",
     "sharp": "^0.32.1",

styles/mdx.css

@@ -10,5 +10,4 @@
 
 em {
   font-family: "Times New Roman", Times, serif, sans-serif;
-  @apply text-lg;
 }