数学符号渲染引擎MathJax.js

---

MathJax.js运行在浏览器中的开源的数学符号渲染引擎,给需要数学公式的站点添加支持
MathJax.js给需要数学公式的站点添加支持
MathJax简介
运行在浏览器中的开源的数学符号渲染引擎，MathJax方便的在浏览器中显示数学公式，不需要使用图片
MathJax可以解析Latex、MathML和ASCIIMathML的标记语言

---

引入MathJax
<script src="https://cdn.bootcss.com/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script>window.MathJax||document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"><\/script>')</script>
官方的TeX-AMS-MML_HTMLorMML配置说明
This configuration file is the most general of the pre-defined configurations. It loads all the important MathJax components, including the TeX and MathML preprocessors and input processors, the AMSmath, AMSsymbols, noErrors, and noUndefined TeX extensions, both the native MathML and HTML-with-CSS output processor definitions, and the MathMenu and MathZoom extensions.
In addition, it loads the mml Element Jax, the TeX and MathML input jax main code (not just the definition files), as well as the toMathML extension, which is used by the Show Source option in the MathJax contextual menu. The full version also loads both the HTML-CSS and NativeMML output jax main code, plus the HTML-CSS mtable extension, which is normally loaded on demand

---

MathJax.js内联config
官方提供了内联配置选项
<script></script>标签对，声明类型
type="text/x-mathjax-config"
要想让这个内联配置生效就得放在光棍影院MathJax.js之前，例子如下
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
    }
});
</script>

---

MathJax.js区域选择性识别
数学公式通常是在文章里，如何实现只在文章的标签对里面去做公式识别
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的第三个参数就是识别范围，
要在id为post-content的标签内去做公式识别

---

MathJax.js避开特殊标签和Class
避开一些特殊的标签或者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"的标签内
不想让mathjax识别评论里的公式就可以用ignoreClass
有多个Class需要避开，通过 | 来区分写成ignoreClass: "class1|class2"

---

MathJax.js美化数学公式
点击该公式时周围有一圈蓝色的边框，通过添加CSS去掉
.MathJax{outline:0;}
要改变字体大小.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": {
    }
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
再HTML-CSS添加可用字体
"HTML-CSS": {
    availableFonts: ["STIX","TeX"]
}

---

MathJax.js关闭公式右击菜单
也是在HTML-CSS添加设置，如下
"HTML-CSS": {    showMathMenu: false}
去掉加载信息
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="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
修复与Instantclick的冲突
适用于一的代码
<script data-no-instant>
InstantClick.on('change', function(isInitialLoad){
    if (isInitialLoad === false) {
        if (typeof MathJax !== 'undefined'){
            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
        }
    }
});
InstantClick.init();
</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>