這篇文章是我給Pinghsu主題添加數(shù)學(xué)公式功能的一個(gè)小教程，包含我大量的官方文檔閱讀后的實(shí)踐，跟著這篇配置教程走，你可以做到給任何一個(gè)需要數(shù)學(xué)公式的站點(diǎn)添加支持。

教程如標(biāo)題所述是針對(duì) Mathjax 的實(shí)踐，我簡(jiǎn)單了解一下 KaTex ，也是個(gè)不錯(cuò)的選擇。

MathJax是一款運(yùn)行在瀏覽器中的開(kāi)源的數(shù)學(xué)符號(hào)渲染引擎，使用MathJax可以方便的在瀏覽器中顯示數(shù)學(xué)公式，不需要使用圖片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的標(biāo)記語(yǔ)言。(Wiki)

在頁(yè)腳處，引入官方的cdn

官方cdn的js在國(guó)內(nèi)訪問(wèn)慢，所以我們一般引入的是國(guó)內(nèi)的公共資源cdn提供的js,這里特別感謝BootCDN

但這個(gè)js還是會(huì)調(diào)用到 cdn.mathjax.org 里的一些配置js文件，我們最好在head內(nèi)加一個(gè)dns-prefetch，用于網(wǎng)頁(yè)加速，了解更多可以訪問(wèn)我另外一篇文章：here

我們引入MathJax，發(fā)現(xiàn)鏈接后面多了個(gè)?config=TeX-AMS-MML_HTMLorMML

這個(gè)多出來(lái)的東西其實(shí)是告訴MathJax，我們要用到的叫TeX-AMS-MML_HTMLorMML.js的配置文件，其用來(lái)控制顯示數(shù)學(xué)公式的HTMl顯示輸出

這個(gè)配置文件其實(shí)也可以通過(guò)指定URL獲取，官方例子如下

MathJax.js也用到其他js,這些js都來(lái)自官方的cdn里，所以這也是解釋了上面為什么我們需要對(duì)官方cdn進(jìn)行加速

下面是官方更詳細(xì)的TeX-AMS-MML_HTMLorMML配置文件的說(shuō)明

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.

更多配置文件信息請(qǐng)看：here

與會(huì)同時(shí)，官方其實(shí)還提供了一個(gè)能讓我們內(nèi)聯(lián)一個(gè)配置選項(xiàng)的功能

很簡(jiǎn)單就是使用標(biāo)簽對(duì)，但注意的是需要聲明類型type="text/x-mathjax-config"。要想讓這個(gè)內(nèi)聯(lián)配置生效就得放在MathJax.js之前，例子如下

其中MathJax.Hub.Config()里的配置選項(xiàng)是本篇文章的重點(diǎn)

我們可以通過(guò)MathJax.Hub.Config()中tex2jax去實(shí)現(xiàn)公式識(shí)別

官方例子，如下

其中inlineMath識(shí)別的單行內(nèi)的數(shù)學(xué)公式,我們可以通過(guò)$ ... $或( ... )去識(shí)別這種數(shù)學(xué)公式

效果如下:

When $a e 0$, there are two solutions to $(ax^2 + bx + c = 0)$

那么displayMath就是識(shí)別整個(gè)獨(dú)立段落的數(shù)學(xué)公式并且居中顯示,我們可以通過(guò)$$ ... $$或[ ... ]去識(shí)別這種數(shù)學(xué)公式

效果如下:

$$
x = {-b pm sqrt{b^2-4ac} over 2a}
$$

在中文世界里，我們往往喜歡用()或者[]去備注或者圈住重要的字段，所以在一般情況下我們并不需要( ... )和[ ... ]去識(shí)別公式

但也會(huì)有遇到兩個(gè)$$的情況造成誤傷，別急，先看完，你就知道怎么解決了

我們的數(shù)學(xué)公式通常是在文章里，那么如何實(shí)現(xiàn)只在文章的標(biāo)簽對(duì)里面去做公式識(shí)別，如下

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

默認(rèn)情況下,MathJax.Hub.Queue(["Typeset",MathJax.Hub])是對(duì)整個(gè)DOM樹(shù)進(jìn)行識(shí)別的

我們要約束識(shí)別范圍，官方文檔告訴我們MathJax.Hub.Queue的第三個(gè)參數(shù)就是識(shí)別范圍，上面的代碼就是告訴我們要在id為post-content的標(biāo)簽內(nèi)去做公式識(shí)別

還有其他方法嗎？

有，那就是避開(kāi)一些特殊的標(biāo)簽或者Class,如下

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

其中skipTags用來(lái)避開(kāi)一些特殊的標(biāo)簽，這里避開(kāi)是script,noscript,style,textarea,pre,code,a的標(biāo)簽內(nèi)

ignoreClass用來(lái)避開(kāi)標(biāo)簽內(nèi)聲明的CSS Class屬性，這里避開(kāi)的是帶有class="class1"的標(biāo)簽內(nèi)

如果我們不想讓mathjax識(shí)別評(píng)論里的公式就可以用ignoreClass

如果有多個(gè)Class需要避開(kāi)，我們可以通過(guò) | 來(lái)區(qū)分，寫(xiě)成ignoreClass: "class1|class2"就可以了

獲取更多tex2jax的配置信息訪問(wèn)：here

上圖所示的是，點(diǎn)擊該公式時(shí)周?chē)幸蝗λ{(lán)色的邊框，我們可以通過(guò)添加CSS去掉，如下

.MathJax{outline:0;}

如果要改變字體大小，如下

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

公式太長(zhǎng)的時(shí)候會(huì)溢出，解決如下

.MathJax_Display{overflow-x:auto;overflow-y:hidden;}

為了更好實(shí)現(xiàn)美化數(shù)學(xué)公式，我們需要擴(kuò)展一下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"]
}

我們要關(guān)閉下圖的公式右擊菜單

也是在HTML-CSS添加設(shè)置，如下

"HTML-CSS": {
    showMathMenu: false
}

Mathjax.js在加載的時(shí)候，我們可以在網(wǎng)頁(yè)左下角看到加載情況，可以直接在MathJax.Hub.Config()里配置去掉，如下

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

這里我整理兩份可以整合到主題的代碼，請(qǐng)根據(jù)自己的需要修改，簡(jiǎn)單注釋了一下

整理一

整理二

配合的css

.MathJax_Display{overflow-x:auto;overflow-y:hidden;}
.MathJax{outline:0;}

代碼如下

適用于整理一的代碼

適用于整理二的代碼

寫(xiě)了好久···

我還會(huì)再寫(xiě)一篇關(guān)于數(shù)學(xué)公式語(yǔ)法···

歡迎訪問(wèn)我的博客：https://www.linpx.com/