前端整合MathjaxJS的配置筆記

標籤：中文   ext   font   識別   efi   javascrip   瀏覽器   類型   mss   

這篇文章是我給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>

前端整合MathjaxJS的配置筆記