fix: KaTeX math rendering with underscores (#5438)

web/package.json

@@ -36,6 +36,7 @@
     "fuse.js": "^7.1.0",
     "highlight.js": "^11.11.1",
     "i18next": "^25.6.3",
+    "katex": "^0.16.27",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",
     "lodash-es": "^4.17.21",

web/pnpm-lock.yaml

@@ -86,6 +86,9 @@ importers:
       i18next:
         specifier: ^25.6.3
         version: 25.6.3(typescript@5.9.3)
+      katex:
+        specifier: ^0.16.27
+        version: 0.16.27
       leaflet:
         specifier: ^1.9.4
         version: 1.9.4
@@ -2111,8 +2114,8 @@ packages:
     resolution: {integrity: sha512-4+5mNNf4vZDSwPhKprKwz3330iisPrb08JyMgbsdFrimBCKNHecua/WBwvVg3n7vwx0C1ARjfhwIpbrbd9n5wg==}
     engines: {node: '>=12'}
 
-  katex@0.16.25:
-    resolution: {integrity: sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==}
+  katex@0.16.27:
+    resolution: {integrity: sha512-aeQoDkuRWSqQN6nSvVCEFvfXdqo1OQiCmmW1kc9xSdjutPv7BGO7pqY9sQRJpMOGrEdfDgF2TfRXe5eUAD2Waw==}
     hasBin: true
 
   khroma@2.1.0:
@@ -4832,7 +4835,7 @@ snapshots:
     dependencies:
       lodash-es: 4.17.21
 
-  katex@0.16.25:
+  katex@0.16.27:
     dependencies:
       commander: 8.3.0
 
@@ -5127,7 +5130,7 @@ snapshots:
       dagre-d3-es: 7.0.13
       dayjs: 1.11.19
       dompurify: 3.3.0
-      katex: 0.16.25
+      katex: 0.16.27
       khroma: 2.1.0
       lodash-es: 4.17.21
       marked: 16.4.2
@@ -5219,7 +5222,7 @@ snapshots:
     dependencies:
       '@types/katex': 0.16.7
       devlop: 1.1.0
-      katex: 0.16.25
+      katex: 0.16.27
       micromark-factory-space: 2.0.1
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
@@ -5594,7 +5597,7 @@ snapshots:
       '@types/katex': 0.16.7
       hast-util-from-html-isomorphic: 2.0.0
       hast-util-to-text: 4.0.2
-      katex: 0.16.25
+      katex: 0.16.27
       unist-util-visit-parents: 6.0.2
       vfile: 6.0.3
 

web/src/components/MemoContent/index.tsx

@@ -44,7 +44,7 @@ const MemoContent = (props: MemoContentProps) => {
         onDoubleClick={onDoubleClick}
       >
         <ReactMarkdown
-          remarkPlugins={[remarkDisableSetext, remarkGfm, remarkBreaks, remarkMath, remarkTag, remarkPreserveType]}
+          remarkPlugins={[remarkDisableSetext, remarkMath, remarkGfm, remarkBreaks, remarkTag, remarkPreserveType]}
           rehypePlugins={[rehypeRaw, rehypeKatex, [rehypeSanitize, SANITIZE_SCHEMA]]}
           components={{
             // Child components consume from MemoViewContext directly

web/src/main.tsx

@@ -17,6 +17,7 @@ import router from "./router";
 import { applyLocaleEarly } from "./utils/i18n";
 import { applyThemeEarly } from "./utils/theme";
 import "leaflet/dist/leaflet.css";
+import "katex/dist/katex.min.css";
 
 // Apply theme and locale early to prevent flash
 applyThemeEarly();