KaTeX 入门：网页里的数学公式渲染
写算法文章、机器学习笔记，绕不开公式。KaTeX 让 Markdown 里写
$E=mc^2$就能渲染出印刷级的数学排版。
KaTeX 是什么
KaTeX 是一个 JavaScript 数学排版库，把 LaTeX 语法的公式渲染成网页里的数学符号。同类产品是 MathJax——老牌、功能全，但渲染慢。KaTeX 用「只实现核心子集 + 极致优化」的思路，同步渲染、毫秒级完成，没有 MathJax 那种页面加载后公式一块块蹦出来的延迟感。
本站的公式渲染链路：文章里的 Markdown 数学语法，经 remark-math 识别、rehype-katex 调 KaTeX 渲染成 HTML+CSS。
两档排版模式
公式有两种行内位置，语法不同：
行内公式：质能方程 $E = mc^2$ 嵌在文字中间。
块级公式（独占一行居中）：
$$
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
$$
行内用单 $ 包裹，块级用 $$。渲染效果：
$E = mc^2$→ E = mc²（跟文字同高）$$...$$→ 居中独立成段，适合推导过程
常用语法速查
LaTeX 语法记住「反斜杠 + 命名」的模式，常用的二十来个覆盖大部分场景：
上下标： $x^2$ $a_1$ $x^{n+1}$（多位要花括号）
分数： $\frac{a}{b}$
求和： $\sum_{i=1}^{n} i$
积分： $\int_0^1 f(x) \, dx$
极限： $\lim_{x \to 0} \frac{\sin x}{x} = 1$
根号： $\sqrt{2}$ $\sqrt[3]{x}$
希腊字母： $\alpha$ $\beta$ $\pi$ $\theta$
比较符： $\leq$ $\geq$ $\neq$ $\approx$ $\pm$
箭头： $\rightarrow$ $\Rightarrow$
矩阵： $\begin{pmatrix} a & b \\ c & d \end{pmatrix}$
记不住没关系——真实工作流是「知道能写公式 → 查在线编辑器（KaTeX 官网有实时预览的速查表）→ 复制语法」。写多了高频的十几个自然就熟了。
在 Astro/Markdown 管线接入
本站用 unified 生态处理 Markdown，公式支持两步：
pnpm add remark-math rehype-katex katex
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
const result = await remark()
.use(remarkMath) // 1. 识别 $...$ / $$...$$ 为数学节点
.use(rehypeKatex) // 2. 把数学节点渲染为 KaTeX HTML
.use(remarkRehype)
.use(rehypeStringify)
.process(markdown);
还要引入 KaTeX 的 CSS（公式里分数线、根号等是用 CSS 画的）：
import 'katex/dist/katex.min.css';
纯前端渲染的轻量场景也可以直接用 KaTeX 的 API：
import katex from 'katex';
const html = katex.renderToString('c = \\pm\\sqrt{a^2 + b^2}', {
displayMode: true, // 块级模式
});
container.innerHTML = html;
renderToString 同步返回 HTML 字符串，嵌入任何框架都行。
实战中的四个坑
$ 和正文的冲突。文本里出现价格「$100」可能被误认成公式开头。多数实现要求 $ 后不能紧跟空格、闭合 $ 前不能是空格，能规避大部分误判；实在冲突多的站可以改用 \(...\) 行内定界符。
下划线与 Markdown 的转义打架。$a_1 + b_2$ 里的 _ 会被某些 Markdown 解析器先处理成斜体。解决方式是数学插件要在 Markdown 行内代码处理之前接管 $ 区段（remark-math 的默认行为已正确处理，但自建管线要注意顺序）。
公式里想输出文字用 \text{}：$v_{\text{max}}$ 里的 max 是正体文字而不是变量斜体，这是排版规范也是可读性关键。
服务端渲染要输出完整 HTML。KaTeX 渲染产物是自包含的 HTML+CSS，SSR 管线里渲染好后发给前端无需再执行 JS——这正是本站选 remark/rehype 管线的原因：公式在服务端就变成静态 HTML，前端零额外开销。
小结
KaTeX 的选择逻辑很简单：要快、要同步渲染、公式语法够用，选它；只有用到 KaTeX 不支持的长尾符号才考虑 MathJax。接入上，Markdown 管线用 remark-math + rehype-katex，轻量场景直接 renderToString。写公式的能力对技术博客是硬需求——算法、概率、ML 主题，没有公式的表达力差一大截。