MathJax是当前最稳妥的HTML5数学公式嵌入方案，通过JavaScript自动适配浏览器能力并回退渲染，需正确引入脚本、标记公式及动态触发typeset。
MathJax 是当前最稳妥的 HTML5 数学公式嵌入方案
原生 HTML5 不支持 LaTeX 或 MathML 公式渲染，必须借助 JavaScript 渲染库。MathJax 是目前兼容性最好、配置最灵活的选择，能自动检测浏览器能力（如是否支持原生 MathML），并 fallback 到 SVG 或 HTML-CSS 渲染。不推荐直接用 <math></math> 标签尝试原生 MathML——多数现代浏览器已弃用或仅部分支持，Chrome 甚至完全移除了对 MathML 的默认支持。
在 HTML 中加载 MathJax 的最小可行写法
把以下代码插入 或页面底部 前即可启用基础渲染：
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
注意几个关键点：
-
tex-mml-chtml.js表示同时支持 LaTeX（$$...$$、\(...\)）和 MathML（<math>...</math>）输入，输出为可缩放的 HTML+CSS（非图片） - 不要用
tex-svg.js，它强制输出 SVG，在复杂公式或动态内容中易出现尺寸错位 - 若页面含大量公式，建议加
async defer属性避免阻塞渲染：<script async defer src="..."></script> - 国内访问 cdn.jsdelivr.net 较稳定；若需离线使用，可下载完整包并指向本地
es5/tex-mml-chtml.js
正确书写公式标记：LaTeX 模式下避开常见解析失败
MathJax 默认启用 LaTeX 解析，但 HTML 环境下容易因字符转义或标签冲突失效。务必遵守：
立即学习“前端免费学习笔记（深入）”；
- 行内公式用
\( ... \)或$...$（注意：单个$在 Markdown 或 CMS 中可能被误解析，优先选\( \)） - 独立公式块用
$$...$$或\[...\]（后者更安全，$$在某些构建工具中会被预处理器吞掉） - HTML 中的
&、_、%等字符必须先被 HTML 转义，例如写矩阵时：\begin{array}{c|c} a & b \end{array}，不能直接写& - 避免在公式内部混用未闭合的 HTML 标签，比如
\( <div>x^2</div> \)会破坏解析器状态
动态插入公式后需手动触发重新渲染
如果用 JavaScript 动态往 DOM 中添加含公式的 HTML（如 element.innerHTML = 'x = \(a + b\)'），MathJax 不会自动识别。必须显式调用：
MathJax.typeset([element]);
其中 element 是包含公式的 DOM 节点（如 document.getElementById('formula-box')）。常见疏漏点：
- 未等 MathJax 加载完成就调用
typeset()→ 报错MathJax is not defined，应放在MathJax.startup.promise.then(() => { ... })回调里 - 对整个页面重排版用
MathJax.typeset()（无参数），但性能差；只刷新局部区域更高效 - 若公式被 Vue/React 等框架管理，需在
mounted或useEffect后调用，且注意框架可能重复渲染导致多次 typeset
公式渲染不是“设好 script 就一劳永逸”的事，动态场景下手动触发和时机控制是实际项目中最常卡住的地方。
