From 15723a08c955242459d1c3b49c818cbc9dbc826e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=9F=E8=B0=83=E8=B0=83?= <398188662@qq.com>
Date: Sun, 3 Aug 2025 22:17:27 +0800
Subject: [PATCH] feat: support math formula rendering. #58

---
 README.md                           | 8 ++++++++
 website/package.json                | 2 ++
 website/src/utils/markdownToHTML.ts | 5 +++++
 3 files changed, 15 insertions(+)

diff --git a/README.md b/README.md
index f5743ca..68c47d5 100644
--- a/README.md
+++ b/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 应用中效果展示。
diff --git a/website/package.json b/website/package.json
index b0e08c4..38f8f3a 100644
--- a/website/package.json
+++ b/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",
diff --git a/website/src/utils/markdownToHTML.ts b/website/src/utils/markdownToHTML.ts
index 54c7b79..38dba10 100644
--- a/website/src/utils/markdownToHTML.ts
+++ b/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,
     })