latex support

frontend/package.json

@@ -20,6 +20,7 @@
     "file-saver": "^2.0.5",
     "html-midi-player": "^1.5.0",
     "i18next": "^22.4.15",
+    "katex": "^0.16.9",
     "lodash-es": "^4.17.21",
     "mobx": "^6.9.0",
     "mobx-react-lite": "^3.4.3",
@@ -35,9 +36,11 @@
     "react-router-dom": "^6.11.1",
     "react-toastify": "^9.1.3",
     "rehype-highlight": "^6.0.0",
+    "rehype-katex": "^6.0.3",
     "rehype-raw": "^6.1.1",
     "remark-breaks": "^3.0.3",
     "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0"
   },

frontend/src/components/MarkdownRender.tsx

@@ -1,6 +1,9 @@
+import 'katex/dist/katex.min.css';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import rehypeHighlight from 'rehype-highlight';
+import rehypeKatex from 'rehype-katex';
+import remarkMath from 'remark-math';
 import remarkGfm from 'remark-gfm';
 import remarkBreaks from 'remark-breaks';
 import { FC } from 'react';
@@ -90,8 +93,9 @@ const MarkdownRender: FC<ReactMarkdownOptions & { disabled?: boolean }> = (props
             'cite'
           ]}
           unwrapDisallowed={true}
-          remarkPlugins={[remarkGfm, remarkBreaks]}
+          remarkPlugins={[remarkMath, remarkGfm, remarkBreaks]}
           rehypePlugins={[
+            rehypeKatex,
             rehypeRaw,
             [
               rehypeHighlight,

frontend/vite.config.ts

@@ -23,7 +23,7 @@ const embedded = [
   'react-beautiful-dnd',
   'react-draggable',
   '@magenta/music', 'html-midi-player',
-  'react-markdown', 'rehype-highlight', 'rehype-raw', 'remark-breaks', 'remark-gfm'
+  'react-markdown', 'rehype-highlight', 'rehype-raw', 'remark-breaks', 'remark-gfm', 'remark-math', 'rehype-katex', 'katex'
 ];
 
 function renderChunks(deps: Record<string, string>) {