前端整合MathjaxJS的配置筆記

這篇文章是我給Pinghsu主題添加數學公式功能的一個小教程，包含我大量的官方文檔閱讀后的實踐，跟着這篇配置教程走，你可以做到給任何一個需要數學公式的站點添加支持。

教程如標題所述是針對 Mathjax 的實踐，我簡單了解一下 KaTex ，也是個不錯的選擇。

MathJax簡介

MathJax是一款運行在瀏覽器中的開源的數學符號渲染引擎，使用MathJax可以方便的在瀏覽器中顯示數學公式，不需要使用圖片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的標記語言。(Wiki)

引入MathJax

在頁腳處，引入官方的cdn

<script src="//www.90168.org cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

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

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

但這個js還是會調用到 cdn.mathjax.org 里的一些配置js文件，我們最好在head內加一個dns-prefetch，用於網頁加速，了解更多可以訪問我另外一篇文章：here

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

外聯config說明

我們引入MathJax，發現鏈接后面多了個?config=TeX-AMS-MML_HTMLorMML

這個多出來的東西其實是告訴MathJax，我們要用到的叫TeX-AMS-MML_HTMLorMML.js的配置文件，其用來控制顯示數學公式的HTMl顯示輸出

這個配置文件其實也可以通過cdn獲取，官方例子如下

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML,http://myserver.com/MathJax/config/local/local.js"> </script>

可惜BootCDN並沒有提供這個js，MathJax.js也用到其他js,這些js都來自官方的cdn里，所以這也是解釋了上面為什么我們需要對官方cdn進行加速

下面是官方更詳細的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.

更多配置文件信息請看：here

http://docs.mathjax.org/en/la...

內聯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.Config()里的配置選項是本篇文章的重點

識別公式

我們可以通過MathJax.Hub.Config()中tex2jax去實現公式識別

官方例子，如下

<script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ] } }); </script> <script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>

其中inlineMath識別的單行內的數學公式,我們可以通過$ ... $或\( ... \)去識別這種數學公式

效果如下:

When ane0, there are two solutions to (ax2+bx+c=0)

那么displayMath就是識別整個獨立段落的數學公式並且居中顯示,我們可以通過$$ ... $$或\[ ... ])新視覺影院6080去識別這種數學公式

效果如下:

 

x=−bpmsqrtb2−4acover2a

 

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

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

區域選擇性識別

約束識別范圍

我們的數學公式通常是在文章里，那么如何實現只在文章的標簽對里面去做公式識別，如下

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的標簽內去做公式識別

避開特殊標簽和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"基於可以了

更多

獲取更多tex2jax的配置信息訪問：here

美化數學公式

去掉藍框

上圖所示的是，點擊該公式時周圍有一圈藍色的邊框，我們可以通過添加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"] }

我們要關閉下圖的公式右擊菜單

也是在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="//www.bsck.org 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>