MathJax 3全新版本配置指南

提醒：本文最后更新于2024-02-11 23:37，文中所关联的信息可能已发生改变，请知悉！

写在前面

忽然发现 MathJax 版本号更新到 3.X 了，而中文互联网是竟然还没多少配置最新版本 MathJax 的相关教程，于是乎我就去官方文档扒了扒。

更新了什么

根据其官方文档的说法，相比于 MathJax 2.X 版本，3.X 版本可谓是变化极大。从在你的网页头部引入配置它的时候，就不再需要引入一个完整的 MathJax.js 文件，还需要加个 ?config= 以使用组合配置了。当你打开某个提供开源前端CDN加速服务的网站，会发现 MathJax 有几十个供选择的配置文件，而你只需加载你需要的一个，以避免多个文件传输，还能同步使用。也就是更加模块化了。

引入并配置 MathJax 3

引入

刚起步，我们直接在页头脚本处引入最通用但也是最大的一个文件 tex-mml-chtml.js（也可以选择文件名带 .min.js 的压缩后文件）。

<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.bootcdn.net/ajax/libs/mathjax/3.1.2/es5/tex-mml-chtml.min.js">
</script>

配置

现在不能用老版本里 MathJax.Hub.Config({}) 像 JSON 一样配置了，而是直接用 MathJax = {}。之后就和老版本一样配置了，我还是按老习惯用美元符号作为分隔符。这里还是用内联脚本的形式配置。

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$']], //行内公式
    displayMath: [['$$','$$']] //段内公式
  }
  svg: {
    fontCache: 'global'
  }
};
</script>

要多来几个分隔符？写成诸如 [['$','$'], ['//','//']] 这样就可以。注意逗号别忘记加。

从旧版本的配置迁移

你不需要重新写一份，官方提供了一个转换工具，只需将原来的配置粘贴，就能得到新版本的配置了。链接在此：

https://mathjax.github.io/MathJax-demos-web/convert-configuration/convert-configuration.html

最终成果：

<link rel="dns-prefetch" href="https://cdn.bootcdn.net" />
<link rel="dns-prefetch" href="https://cdn.mathjax.org" />
<script>
    MathJax = {
        tex: {
            inlineMath: [
                ["$", "$"]
            ], //行内公式选择$
            displayMath: [
                ["$$", "$$"]
            ], //段内公式选择$$
            processEscapes: true,
            autoload: {
                color: [],
                colorv2: ['color']
            },
            packages: {
                '[+]': ['noerrors', 'extpfeil', 'mhchem']
            }
        },
        svg: {
            fontCache: 'global'
        }
        options: {
            skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'], //避开某些标签
            ignoreHtmlClass: 'tex2jax_ignore',
            processHtmlClass: 'tex2jax_process'
        },
        chtml: {
            matchFontHeight: false
        },
        loader: {
            load: ['[tex]/noerrors', '[tex]/extpfeil', '[tex]/mhchem']
        }
    };
</script>
<script type="text/javascript" id="MathJax-script" async
    src="https://cdn.bootcdn.net/ajax/libs/mathjax/3.1.2/es5/tex-mml-chtml.min.js">
</script>