前端整合MathjaxJS的配置筆記

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

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

MathJax簡介

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

引入MathJax

在頁腳處，引入官方的cdn

<script src="//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.bootcss.com" />

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

外聯config說明

咱們引入MathJax，發現連接後面多了個?config=TeX-AMS-MML_HTMLorMML

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

這個配置文件其實也能夠經過指定URL獲取，官方例子以下

<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>

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

內聯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 $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$

那麼displayMath就是識別整個獨立段落的數學公式而且居中顯示,咱們能夠經過$$ ... $$或\\[ ... \\]去識別這種數學公式

效果以下:

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

在中文世界裏，咱們每每喜歡用()或者[]去備註或者圈住重要的字段，因此在通常狀況下咱們並不須要\( ... \)和\[ ... \]去識別公式

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

區域選擇性識別

約束識別範圍

咱們的數學公式一般是在文章裏，那麼如何實現只在文章的標籤對裏面去作公式識別，以下

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_Display{overflow-x:auto;overflow-y:hidden;}

擴展功能

爲了更好實現美化數學公式，咱們須要擴展一下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, //關閉js加載過程信息
    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" //避開含該Class的標籤
    },
    "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, //關閉js加載過程信息
    messageStyle: "none", //不顯示信息
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath:  [ ["$", "$"] ], //行內公式選擇$
        displayMath: [ ["$$","$$"] ], //段內公式選擇$$
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'] //避開某些標籤
    },
    "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>

配合的css

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

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>

結語

寫了很久···

我還會再寫一篇關於數學公式語法···

歡迎訪問個人博客：https://www.linpx.com/