mathjax/MathJax · 上手攻略

仓库：mathjax/MathJax
链接：https://github.com/mathjax/MathJax
分类：前端渲染 · 学术写作工具
作者：Jay
更新：2026-07-14

这是什么

MathJax 是一个开源 JavaScript 渲染引擎，专门在浏览器中高质量地显示 LaTeX、MathML 和 AsciiMath 数学公式。它不需要用户安装任何插件或额外字体，只要网页里引用了 MathJax，公式就会自动渲染出来。

MathJax 诞生于 2010 年前后，至今仍是 Web 数学渲染的事实标准，被 arXiv、Stack Overflow、维基百科、Mozilla 开发者文档等数千个站点使用。当前稳定版为 v4（基于 TypeScript 重写，自 v3 起全面重构）。

核心特点： - 三种输入格式：LaTeX（最常用）、MathML（XML 格式）、AsciiMath（简洁文本语法） - 多种输出格式：HTML-CSS、SVG、CommonHTML（v4 默认 SVG） - 内置无障碍支持：屏幕阅读器语音输出、表达式探索器（Expression Explorer） - 无需插件：纯 CDN 引用，读者无需任何操作 - 强大 API：可在任何 Web 应用中集成和自定义

解决什么问题

在网页中显示数学公式长期是个难题：图片不清晰且无法复制、Flash/Java Applet 不再受支持、不同浏览器渲染不一致。MathJax 统一了这件事——用 LaTeX 语法写公式，所有浏览器渲染出矢量级清晰度，同时天然支持复制粘贴和辅助技术。

快速安装

方式一：CDN 引用（最简单，推荐静态网页）

一行 script 标签，无需 npm，无需构建：

<script src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js" defer></script>

⚠️ defer 表示等 HTML 解析完再加载，不阻塞页面渲染。

按需加载子模块（减小体积）：

<!-- 只加载 LaTeX 输入 + SVG 输出 -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@4/esm/tex-svg.js" type="module"></script>

方式二：npm 安装（Node.js 服务端 / 现代前端项目）

npm install mathjax@4

Node.js 中使用（ESM）：

import MathJax from 'mathjax';

// 初始化，指定加载哪些模块
await MathJax.init({
  loader: { load: ['input/tex', 'output/svg'] }
});

// LaTeX 转 SVG
const svg = await MathJax.tex2svgPromise('\\frac{1}{x^2-1}', { display: true });
console.log(MathJax.startup.adaptor.serializeXML(svg));

Node.js 中使用（CommonJS / ES5）：

const MathJax = require('mathjax');
MathJax.init({
  loader: { load: ['input/tex', 'output/svg'] }
}).then(() => {
  const svg = MathJax.tex2svg('\\frac{1}{x^2-1}', { display: true });
  console.log(MathJax.startup.adaptor.serializeXML(svg));
}).catch(err => console.error(err));

方式三：自托管（内网 / 不能访问外网时）

npm install mathjax@4
# 将 node_modules/mathjax 复制到服务器静态目录
mv node_modules/mathjax /your/server/path/mathjax

<script src="https://your-site.com/mathjax/tex-mml-chtml.js" defer></script>

方式四：GitHub 下载

git clone https://github.com/mathjax/MathJax.git mathjax
mv mathjax /your/server/path/mathjax

核心用法

1. 最简完整示例（CDN + LaTeX）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MathJax 示例</title>
  <!-- 推荐：CDN 引用，tex-mml-chtml 支持 LaTeX + MathML 输入 -->
  <script src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js" defer></script>
</head>
<body>
  <p>行内公式：\(E = mc^2\)</p>
  <p>独立公式：</p>
  \[\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}\]
</body>
</html>

2. 页面配置（window.MathJax 对象）

在加载 MathJax 脚本之前定义配置：

<script>
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],  // 行内公式定界符
      displayMath: [['$$', '$$'], ['\\[', '\\]']], // 独立公式定界符
      processEscapes: true
    },
    svg: {
      fontCache: 'global'  // 使用 SVG 时全局缓存字体
    },
    startup: {
      ready: () => {
        MathJax.startup.defaultReady();
        MathJax.startup.promise.then(() => {
          console.log('MathJax 已就绪');
        });
      }
    }
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js" defer></script>

3. 常用 LaTeX 语法速查

效果	LaTeX 语法
分式	`\frac{a}{b}`
上标	`x^{2}`
下标	`x_{i}`
开方	`\sqrt{x}` 或 `\sqrt[n]{x}`
求和	`\sum_{i=1}^{n}`
积分	`\int_{a}^{b}`
矩阵	`\begin{pmatrix} a & b \\ c & d \end{pmatrix}`
极限	`\lim_{x \to \infty}`
希腊字母	`\alpha`, `\beta`, `\gamma`, `\pi`

4. 动态渲染（页面内容变化后通知 MathJax）

如果用 SPA 框架（React/Vue 等）动态插入数学内容，需要手动触发渲染：

// 在新内容插入后调用
MathJax.typesetPromise().then(() => {
  console.log('渲染完成');
}).catch(err => console.error('渲染失败:', err));

5. 输出格式对比

输出格式	说明	适用场景
`tex-mml-chtml.js`	HTML + CSS 输出	通用，推荐首选
`tex-svg.js`	SVG 输出	高清，适合打印
`tex-chtml.js`	仅 HTML-CSS	轻量，不支持 MathML

典型适用场景

个人博客/技术文档：用 LaTeX 写数学公式，无需担心读者环境
在线教育平台：数学课件、试卷、互动笔记
学术出版：出版社/期刊的 Web 版文章
Jupyter Notebook / JupyterBook：nbconvert 和 Sphinx 扩展都内置 MathJax
Q&A 社区：如自建 Stack Overflow 类论坛
Wiki / CMS：任何支持嵌入 JS 的内容管理系统

坑与注意

CDN 版本锁定：生产环境务必锁定小版本号（如 @4），不写 @latest，避免 CDN 更新后行为变化破坏已有页面。
v3 → v4 迁移：v4 API 与 v3 基本兼容，但有些新选项和少量 breaking change，详见官方升级文档。若项目用的是 v2，需要较多改动。
LaTeX 语法冲突：在 Markdown 里写 LaTeX，务必确认定界符（如 $...$ 、$...$）与所用渲染器不冲突。Jekyll 博客常用 $...$ ，若与 MathJax 冲突可改用 $...$。
性能问题：大型页面（上百个公式）首次渲染有延迟，可通过预加载+分步渲染优化，或考虑用 SVG 输出配合字体缓存。
服务端渲染（SSR）：Next.js/Nuxt 等 SSR 框架需要特别注意：MathJax 是纯客户端库，SSR 页面里需要 useEffect + typesetPromise 延迟初始化，直接在服务端执行会报错。
字体加载慢：MathJax 默认从 CDN 加载字体，自托管时需确保字体文件可访问，否则公式会降级为系统字体（丑且不准）。
MathJax 与 KaTeX 混用：同一页面不要同时引用两个渲染器，定界符冲突会导致其中一个失效。

与同类对比

库	渲染方式	体积	渲染质量	特点
MathJax	JS 动态渲染	较大（按需加载）	极高	生态最大、支持 MathML/AsciiMath、无障碍好
KaTeX	JS 动态渲染	较小	高	速度最快、不支持 MathML、定制性低
codecogs	服务端渲染为图片	需网络请求	一般	上古方案，不推荐新项目使用
markdown-it-mathjax	插件集成	依赖 MathJax	极高	Markdown 工作流中嵌入 MathJax

一句话对比：如果你需要最快速度且只用 LaTeX，选 KaTeX；如果你需要完整 LaTeX + MathML + 最佳无障碍支持，选 MathJax v4。

一句话推荐结论

MathJax 是网页数学渲染的事实标准，v4 之后更现代、更轻量——只需要一个 CDN 链接，任何人都能在浏览器里看到完美的数学公式，是学术写作、技术博客和在线教育平台的必备之选。