引入

你可以根据服务端和客户端的网络状况选择合适的 CDN 服务器来引入。

官方CDN

<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

BootCDN

<script type="text/javascript" async src="https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

感谢国内免费CDN服务：BootCDN

有问题？

“?config=”是什么

详情在文后有提到。

“async”是什么

这是个<script>标签的属性，表示异步执行该脚本。仅对有src属性的脚本有作用，也就是说对内联脚本（无src属性的）无作用。

配置

引入 MathJax 之后，就可以配置它了。

官方文档中提到，主要可以通过使用外联配置文件和在<script>中内联配置两种方法来配置。

外联配置

你可能已经注意到，在其他的 MathJax 配置教程引入库的代码中，链接后都带有一个?config=参数，而参数值在许多教程里各不相同。比如这样：https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML。

这个参数其实就是指定预编译的配置文件的，那么这个参数值有有何不同呢？

大概有这么几种参数值（配置文件）：

  • TeX-MML-AM_CHTML
  • TeX-MML-AM_HTMLorMML
  • TeX-MML-AM_SVG
  • TeX-AMS-MML_HTMLorMML
  • TeX-AMS_CHTML
  • TeX-AMS_SVG
  • TeX-AMS_HTML
  • TeX-AMS-MML_SVG
  • MML_CHTML
  • MML_SVG
  • MML_HTMLorMML
  • AM_CHTML
  • AM_SVG
  • AM_HTMLorMML
  • default

每个预编译的配置文件都会加载特定的预处理器、输入处理器、输出处理器和扩展。另外，如果你把它指定为default的话，它就会加载几乎所有的配置以及解释器，然后就可以自己定制。你还可以通过在配置末尾加上“-full”来加载完整版（对应的标准版不加载实现代码），不过对于偶尔使用一下就没有必要了。

这里使用的TeX-AMS-MML_HTMLorMML等同于内联配置中的：

MathJax.Hub.Config({
    config: ["MMLorHTML.js"],
    jax: ["input/TeX","input/MathML","output/HTML-CSS","output/NativeMML", "output/PreviewHTML"],
    extensions: ["tex2jax.js","mml2jax.js","MathMenu.js","MathZoom.js", "fast-preview.js", "AssistiveMML.js", "a11y/accessibility-menu.js"],
    TeX: {
        extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
    }
});

因此，你也可以直接在内联配置中配置。

内联配置

你需要在MathJax.Hub.Config()函数中加载配置。

你还需要在包含MathJax.Hub.Config()的<script>标签上带上type="text/x-mathjax-config"。

需要注意的是，这个配置的<script>必须放在引入的<script>之前。

也就是这样：

<script type="text/x-mathjax-config">
    MathJax.Hub.Config();
</script>
<script type="text/javascript" async src="https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

详细配置说明

MathJax.Hub.Config({
    showProcessingMessages: false, //关闭js加载过程信息
    messageStyle: "none", //不显示信息
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath: [["$", "$"]], //行内公式选择$
        displayMath: [["$$", "$$"]], //独立段落公式选择$$
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'], //避开某些标签
        processEscapes: true
    },
    "HTML-CSS": {
        availableFonts: ["STIX", "TeX"], //可选字体
        showMathMenu: false //关闭右击菜单显示
    },
    TeX: {
        extensions: ["AMSmath.js", "AMSsymbols.js", "extpfeil.js", "mhchem.js"] //一些写化学式的包
    },
    CommonHTML: {
        matchFontHeight: false
    }
});

大概如图所示了，你可以自行修改。

更多的优化配置

约束识别范围

目的是只让脚本识别 WordPress 文章内容里的公式识别符。

首先获取当前文章 id，赋值给变量mathId

var mathId = document.getElementById("post-content");

然后在配置MathJax.Hub.Config()之后加上：

MathJax.Hub.Queue(["Typeset",MathJax.Hub,mathId]);

意思就是只在 id 为post-content的标签内去识别。

你也可以在MathJax.Hub.Config()里加上：

skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a']

意思就是不识别这些标签里的文本。

去除公式周围的蓝框

css 里加上：

.MathJax{outline:0;}

注意事项

以上配置仅作参考，请根据自己的实际情况选择。

兼容性问题

getElementById()的传入参数需要根据自己的实际情况选择，大概是把需要渲染的标签id输入即可。

比如这个示例， WordPress 的正文部分的标签id大概是“post-57”，“57”即为文章id。所以需要先document.getElementById("post-content")获取一下。

var mathId = document.getElementById("post-content"); //获取当前文章id
window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById(mathId)]); //如果不传入第三个参数，则渲染整个document

最后

<link rel="dns-prefetch" href="https://cdn.bootcss.com" />
<link rel="dns-prefetch" href="https://cdn.mathjax.org" />
<script type="text/x-mathjax-config">
    var mathId = document.getElementById("post-content"); //选择公式识别范围
    MathJax.Hub.Config({
        showProcessingMessages: false, //关闭js加载过程信息
        messageStyle: "none", //不显示信息
        extensions: ["tex2jax.js"],
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {
            inlineMath:  [ ["$", "$"] ], //行内公式选择$
            displayMath: [ ["$$","$$"] ], //段内公式选择$$
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'], //避开某些标签
            processEscapes: true
        },
        "HTML-CSS": {
            availableFonts: ["STIX","TeX"], //可选字体
            showMathMenu: false //关闭右击菜单显示
        },
        TeX: {
            extensions: ["AMSmath.js","AMSsymbols.js","extpfeil.js","mhchem.js"] //化学式
        },
        CommonHTML: {
            matchFontHeight: false
        }
    });
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,mathId]);
</script>
<script data-no-instant>
    InstantClick.on('change', function (isInitialLoad) {
        if (isInitialLoad === false) {
            if (typeof MathJax !== 'undefined') {
                var mathId = document.getElementById("post-content");
                MathJax.Hub.Queue(["Typeset", MathJax.Hub, mathId]);
            }
        }
    });
    InstantClick.init();
</script>
<script type="text/javascript" async
    src="https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

参见

MathJax官网

MathJax | Beautiful math in all browsers.

CDN来源

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

部分代码参考

MathJax Documentation — MathJax 2.7 documentation

前端整合MathjaxJS的配置笔记 2017-02-20

MathJax: 让前端支持数学公式 2018-10-04

其他

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script#%E5%B1%9E%E6%80%A7