feat: support math formula rendering. #58

README.md

@@ -29,6 +29,14 @@
 - [x] CI 自动生成 Electron 桌面应用。
 - [ ] ~~支持全局字号大小选择。~~
 
+### 数学公式
+
+$\\c = \pm\sqrt{a^2 + b^2}$ 和 $C_L$ 数学公式行内显示
+
+```math
+L = \frac{1}{2} \rho v^2 S C_L
+```
+
 ### 支持代码块样式
 
 下面是 `jsx` 代码块展示示例，并高亮代码，用于 web 应用中效果展示。

website/package.json

@@ -34,10 +34,12 @@
     "react-router-dom": "^6.3.0",
     "rehype-attr": "^3.0.0",
     "rehype-ignore": "^2.0.0",
+    "rehype-katex": "^7.0.1",
     "rehype-prism-plus": "^2.0.0",
     "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.0.0",
     "styled-components": "~6.1.0",

website/src/utils/markdownToHTML.ts

@@ -5,7 +5,10 @@ import { Element } from 'hast';
 import remarkParse from 'remark-parse';
 import remarkGfm from 'remark-gfm';
 import remarkRehype from 'remark-rehype';
+import remarkMath from 'remark-math';
 import rehypePrism from 'rehype-prism-plus';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css'; // Ensure KaTeX styles are included
 import rehypeRaw from 'rehype-raw';
 import rehypeAttrs from 'rehype-attr';
 import rehypeIgnore from 'rehype-ignore';
@@ -32,8 +35,10 @@ export function markdownToHTML(md: string, css: string, opts: MarkdownToHTMLOpti
   const processor = unified()
     .use(remarkParse)
     .use(remarkGfm)
+    .use(remarkMath)
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeRaw)
+    .use(rehypeKatex)
     .use(rehypePrism, {
       ignoreMissing: true,
     })