JavaScript库-mathjax3使用笔记

如何使用 mathjax3 从而在 html 中插入 LaTeX 公式。

使用方式

网址链接方式

举例如下

<!-- MathJax 3 (CDN 保留，离线环境可自行替换为本地) -->
<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
  window.MathJax = {
    tex: { inlineMath:[['$','$'],['\\(','\\)']], displayMath:[['$$','$$'],['\\[','\\]']], processEscapes:true },
    options: { skipHtmlTags:['script','noscript','style','textarea','pre'] }
  };
</script>

本地下载

要在无网络的环境下使用公式渲染，最可靠的方式就是下载一份完整的 MathJax 文件到本地。对于 3.2.2 版本，推荐直接从 GitHub 的 MathJax 仓库（而非 MathJax-src 源码库）下载预构建文件。这样做能避免复杂的编译过程，直接获得可在浏览器中使用的文件。

以下是具体的操作步骤：

📥 1. 下载与准备

1. 访问下载页面：在浏览器中打开此链接：github.com/mathjax/MathJax/releases/tag/3.2.2。

2. 下载压缩包：在页面下方找到 “Assets” 区域，点击 Source code (zip) 或 MathJax-3.2.2.zip 进行下载（我只）。

   • 注意：MathJax-src 是“源码版”，需要编译才能使用，请勿直接使用。（我下载的其中一个就是MathJax-src-3.2.2.zip 就是源码包，另一个 MathJax-3.2.2.tar.gz 才是编译后的 ）

     解压后，查看根目录下是否有 es5 文件夹。若有，则正确；若只有 components、.ts 等文件，则仍是源码。

3. 解压文件：将下载的压缩包解压到您项目的 src/js/ 目录下。

项目结构最终会类似于：

your-project/
├── src/
│   ├── css/
│   ├── images/
│   └── js/                # JavaScript 文件存放目录
│       └── MathJax/       # <-- 将解压后的 MathJax 文件夹放在这里
│           ├── es5/
│           ├── ...
├── template.html
└── ...

⚙️ 2. 页面配置与引用

下载完成后，修改您的 template.html 文件，将 MathJax 的 CDN 链接替换为本地路径。

这里MathJax 3 的 CommonHTML 输出引擎默认从 CDN 加载字体（https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts）。如果你把 MathJax 整个目录放到了本地，就必须告诉它字体在哪，否则公式会无法正常显示（例如显示为缺失字符的方块）。

<!-- 1. 配置 MathJax（必须在加载脚本之前） -->
<script>
  window.MathJax = {
    tex: {
      /* 允许行内用 \(...\) 或 $...$（后者按需开；报告里建议只开 \(...\) 最稳） */
      inlineMath: [['\\(', '\\)']],
      displayMath: [['\\[', '\\]']],   /* 区块公式用 \[ ... \] */
      tags: 'none',                     /* 不需要公式自动编号就 none */
      processEscapes: true
    },
    chtml: {
      fontURL: 'src/js/MathJax-3.2.2/es5/output/chtml/fonts'   // 本地字体路径
    },
    options: {
      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
    }
  };
</script>

<!-- 2. 加载本地 MathJax（使用 defer 确保顺序） -->
<script defer src="src/js/MathJax-3.2.2/es5/tex-svg-full.js"></script>

效果太难看了，改成使用 SVG 渲染模式 (注：如果你的文件夹里还有 tex-svg-full.js，用那个更好，功能更全)。SVG 是把公式当成真正的矢量图形来画，线条锐利、粗细适中、比例完美，所以看起来高级很多

<script defer src="./MathJax-3.2.2/es5/tex-svg-full.js"></script>

此时可以删除本地字体路径的语句，用不上了。

\boldsymbol 命令

区分 \mathbf 和 \boldsymbol 命令

比对如下，一个是粗字体，一个是粗斜体。在表述矩阵和向量的时候，二者都可以用，只是 \boldsymbol 命令 是更现代的做法。

但是 \mathbf 还有一个致命问题，就是它只能适用于拉丁字母（A–Z a–z）和数字，不能适用于希腊字母，如 \alpha 。因此建议还是别用 \mathbf 了。

命令	需要包	效果	能不能粗希腊字母	对大写拉丁字母 A/B 的效果
\mathbf{A}	不需要（LaTeX 内置）	直立粗体（upright bold），强行把字变成正体	❌ 无效	粗正体 A（看起来”竖”的）
\boldsymbol{A}	amsmath（或 amsbsy）	斜体粗体（bold italic），保留数学字的斜体特征再加粗	✅ 能粗	粗斜体 A（看起来”斜”的，跟周围数学斜体更搭）
\bm{A}	bm宏包（推荐）	同 \boldsymbol但更强更准，间距更好	✅✅ 最强	粗斜体 A

mathjax3 中使用\boldsymbol 命令

mathjax3 原生支持 \mathbf ，不支持 \bm ，可以使用 \boldsymbol 命令，只是需要设置一下，确保启用了相应的插件。

window.MathJax = {
  loader: {
    load: ['[tex]/boldsymbol']  // 加载扩展
  },
  tex: {
    packages: {'[+]': ['boldsymbol']} // 启用扩展
  }
};

加上之前的设置，此时的 js 设置代码如下（注释统一改为 // ，标准的行内注释格式）

<script>
window.MathJax = {
  loader: {
    // 加载 boldsymbol 扩展（支持 \boldsymbol{} 粗希腊字母）
    load: ['[tex]/boldsymbol']
  },

  tex: {
    // 行内公式用 \(...\)，不用 $ 避免跟模板语法冲突
    inlineMath: [['\\(', '\\)']],
    displayMath: [['\\[', '\\]']],   // 区块公式用 \[ ... \]
    tags: 'none',                      // 不需要公式自动编号
    processEscapes: true,
    packages: {'[+]': ['boldsymbol']}  // 启用扩展（必须跟 loader.load 配套）
  },

  options: {
    skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
  }
};
</script>

此时你就可以在正常使用 \boldsymbol 命令了，举例如下

\[
\boldsymbol{Y} = \boldsymbol{X \beta} + \boldsymbol{Z \gamma} + \boldsymbol{\epsilon} + \boldsymbol{e}
\]

复制到word中

Word 公式的底层格式叫 OMML（Office Math Markup Language），是微软自家的 XML 格式；

LaTeX      → 纯文本标记语言（学术界排版标准）
OMML       → Word 内部的 XML 公式格式（Word 2007+ 的唯一原生存储）
MathML     → W3C 网页标准（浏览器里用，Word 不直接存它）

你在 Word 里看到的公式 = OMML 渲染出来的

我试过了，word 公式里直接写 latex 代码不能正常展示。AI 需要 Word 2019/365 或更新版本，并且只支持部分 LaTeX 命令（我用的是 2016 版本，不行）。

单个公式可以在网页中选中公式 - 右键 - copy to clipboard - MathML Code ，这就是复制上了 MathML 格式的代码，直接复制黏贴到 word 中就能显示（MathML（数学置标语言） 是 Word 能够识别的标准数学格式之一）。