前端整合MathJax

源文：https://www.cnblogs.com/tianshifu/p/6388391.html

MathJax简介

MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前可以解析Latex、MathML和ASCIIMathML的标记语言。

引入MathJax

官方的cdn在国内访问慢，所以我们一般引入的是国内的公共资源cdn提供的js，特别感谢BootCDN.

<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

后面的?config=TeX-AMS-MML_HTMLorMML，这个多出来的东西其实是告诉MathJax，我们要用到的叫TeX-AMS-MML_HTMLorMML.js的配置文件，其用来控制显示数学公式的HTML显示输出。

但是这个js还是会调用到cdn.mathjax.org里的一些配置js文件，我们最好在head内加车个dns-prefetch，用于网页加速。

<link rel="dns-prefetch" href="//cdn.mathjax.org" />

内联config说明

使用<script></script>标签，声明类型type="text/x-mathjax-config"，而且要放在MathJax.js之前。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
});
</script>
<script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>

其中MathJax.Hub.Cofig()就是本文的重点：

1. 识别公式

使用tex2jax去实现公式识别。

MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
    }
});

其中inlineMath识别的单行内的数学公式，我们可以通过$...$或$...$去识别这种数学公式。

dispalyMath就是识别段落的数学公式并且居中显示，我们可以通过$$...$$ 或\[..\]去识别这种数学公式。

2.区域选择性识别

var mathId = document.getElementById("post-content");
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
    }
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub,mathId]);

默认情况下，MathJax.Hub.Queue(["Typeset",MathJax.Hub])是对整个DOM树进行识别的。

我们要约束范围，就是使用MathJax.Hub.Queue的第三个参数。

3.避开特殊标签和Class

MathJax.Hub.Config({
    tex2jax: {
        inlineMath:  [ ["$", "$"] ],
        displayMath: [ ["$$","$$"] ],
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'],
        ignoreClass:"class1"
    }
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

其中skipTags用来避开一些特殊的标签，这里避开的是script, noscript, style, textarea, pre, code, a的标签。

ignoreClass用来避开标签内声明的css class属性，这里避开的是带有class="class1"的标签。

如果有多个Class需要避开，我们可以通过|来区分，写成ignoreClass: "class1|class2"基本可以了。

4.美化数学公式

（1）去掉蓝框

.MathJax{outline:0;}

（2）改变字体大小

.MathJax span{font-size:15px;}

为了更好的美化数学公式，可以扩展MathJax.Hub.Config()

MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath:  [ ["$", "$"] ],
        displayMath: [ ["$$","$$"] ],
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'],
        ignoreClass:"class1"
    },
    "HTML-CSS": {
    }
});

我们可以在HTML-CSS添加可用字体

"HTML-CSS": {
    availableFonts: ["STIX","TeX"]
}

（3）去掉公式右击菜单

"HTML-CSS": {
    showMathMenu: false
}

（4）去掉加载信息

MathJax.js在加载的时候，我们可以在网页左下角看到加载情况，可以直接在MathJax.Hub.Config()里配置去掉，如下：

MathJax.Hub.Config({
    showProcessingMessages: false,
    messageStyle: "none"
});

参考：

整理一

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    showProcessingMessages: false,
    messageStyle: "none",
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath:  [ ["$", "$"] ],
        displayMath: [ ["$$","$$"] ],
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'],
        ignoreClass:"comment-content"
    },
    "HTML-CSS": {
        availableFonts: ["STIX","TeX"],
        showMathMenu: false
    }
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>
<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
整理二

<script type="text/x-mathjax-config">
var mathId = document.getElementById("post-content");
MathJax.Hub.Config({
    showProcessingMessages: false,
    messageStyle: "none",
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath:  [ ["$", "$"] ],
        displayMath: [ ["$$","$$"] ],
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'],
        ignoreClass:"comment-content"
    },
    "HTML-CSS": {
        availableFonts: ["STIX","TeX"],
        showMathMenu: false
    }
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub,mathId]);
</script>
<script src="//www.bsck.org cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

MathJax简介

引入MathJax

内联config说明

参考：

猜你喜欢