MathJax是一個開放原始碼的JavaScript顯示引擎,適用於所有現代瀏覽器中的LaTeX、MathML和AsciMath表示法。
MathJax官網為 https://www.mathjax.org 其開源文件地址為 https://github.com/mathjax
Mathjax使用基於網路字型來生成高質量的排版,這種排版可以達到完全解析度,數學是基於文字的,而不是基於影像的,因此它可以用於搜尋引擎,
體驗他的功能請看下面的公式:
\( f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz \)
(1)引入Mathjax
因為MathJax是基於網路字型生成公式,其內帶字型比較大,所以,通常推薦使用CDN網路分發進行載入。國外使用者基本上使用Jsdelivr
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
如果是國內使用者推薦使用Bootcdn
<script id="MathJax-script" async src="https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js"></script>
如果你想從本地載入,開源下載一個Release版本。
https://github.com/mathjax/MathJax/archive/master.zip
如果你想本地偵錯程式原始碼,可以下載Source Code
https://github.com/mathjax/MathJax-src/archive/master.zip
在上面程式碼裡,script裡使用了async用於非同步載入。id預設為MathJax-script。
(2)載入Mathjax不同的模組
Mathjax 3.0版本和2.0版本差距非常大,3.0版本開始採用模組化開發,在2.0版本里你需要載入所有的JS,但是在3.0版本里,你可以按需載入。
3.0裡包含了一些核心元件元件,這些元件是Mathjax執行所必須的,除此以外,你可以按需載入你所需要的模組,
例如如果你是製作數學公式可以只載入數學模組, 你是製作文字排版的可以只載入排版模組。
基本上Mathjax預設包含了8個載入模組。
tex-chtml tex-chtml-full tex-svg tex-svg-full tex-mml-chtml tex-mml-svg mml-chtml mml-svg
它們都至少包括一個輸入input處理器、一個輸出output處理器、MathJaxTex所需要的字型、上下文選單和啟動模組。
tex-chtml 會載入 ams, newcommand, require, autoload, configMacros, 和 noundefined。這意味著大部分情況下能滿足你基本需求。你也可以使用 require 自己載入更多模組。
tex-chtml-full 會包含tex-chtml的內容,同時還包括input/tex-full 等但是不包含 physics 和 colorV2
tex-svg mathjax預設以字型輸出公式,如果你需要是svg輸出公式,請使用svg包。
tex-svg-full:包含全部以svg輸出格式。
tex-mml-chtml(常用):包含了對MathML 語言的支援,顯示時以字型方式顯示。
tex-mml-svg:包含了對MathML 語言的支援,顯示時以svg方式顯示。
mml-chtml 不包含Tex,支援MathML,以文字顯示。
mml-svg:不包含Tex,以SVG方式顯示。
(3)輸入元件
目前MathJax支援三種輸入元件:
input/tex input/mathml input/asciimath
tex:支援tex和Latex輸入
mathml:支援math ml輸入。
asciimath:支援 asciimath 輸入
(4)理解輸入和輸出
現在,引入mathjax,然後寫一段HTML程式碼
開啟瀏覽器看到效果如下
如何理解輸出是文字還是SVG?
從使用者的角度看,基本上一樣的,但是在瀏覽器渲染方面則採用不同的渲染模式。
下圖顯示以文字輸出數學公式,此時,Mathjax自定義了很多HTML5的自定義標籤 如 <mjx-mo>, <mjx-num>,。
在HTML5裡出了我們常用的 div, span, a, h1 等標籤外,還允許開發人員自定義瀏覽器標籤,但是自定義標籤按照約定必須以“-”分割,例如,你也可以自定義標籤:<abc-xx></abc-xx>,但是不推薦用 <abcxx></abcxx>,這主要是為了方便瀏覽器解析,防止和現有的標籤衝突等。
Mathjax通過自定義標籤,然後給標籤設定class屬性,利用字型顯示字元,所以你看到“b”不是字母“b”,而是一個向量圖形。
Mathjax為每個字元製作了一個字型,這樣利用字型顯示公式,字型美觀,即使再放大也不失真。
在公式上,選擇SVG輸出。
則系統用svg顯示公式。此時,如果檢視瀏覽器的HTML程式碼,則如下圖SVG方式。
(5)配置Mathjax
預設情況下,MathJax 使用 \( 和 \) 作為行內公式的開始和結束(類似 span)。 使用 \[ 和 \] 作為段落的開始和結束(類似 div)
但是,你也可以自定義配置,如下使用 $和$作為公式的開始和結束。
但是,不推薦使用$是因為,$是美元符號,這會導致 “這個蘋果$5元,那個蘋果$6元”,結果系統把$之間的內容當成了公式了。
請注意:和其它系統不同,對於Mathjax的配置,是直接定義一個MathJax物件,然後設定其屬性。
<script> MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] } }; </script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"> </script>
(6)一些重要配置
MathJax提供了非常強大的配置引數。下面是一些配置。
MathJax = { options: { skipHtmlTags: [ // HTML tags that won't be searched for math 'script', 'noscript', 'style', 'textarea', 'pre', 'code', 'annotation', 'annotation-xml' ], includeHtmlTags: { // HTML tags that can appear within math br: '\n', wbr: '', '#comment': '' }, ignoreHtmlClass: 'tex2jax_ignore', // class that marks tags not to search processHtmlClass: 'tex2jax_process', // class that marks tags that should be searched compileError: function (doc, math, err) {doc.compileError(math, err)}, typesetError: function (doc, math, err) {doc.typesetError(math, err)}, renderActions: {...} } };
skipHtmlTags配置可以讓Mathjax忽略一些標籤,例如當你用 <code> 包含一些公式時,可能希望MaxJax不把其中的公式進行解析。
includeHtmlTags 可以配置在數學公式裡可以出現哪些標籤,例如公式裡出現 n可用於換行等。
ignoreHtmlClass:可以設定忽略一些class
processHtmlClass:可以設定處理class。
我們提供了一個demo。 http://demo.dotnetcms.org/math/
在這個demo裡,插入數學公式時使用瞭如下配置:
let className = 'math-tex'; MathJax = { options: { processHtmlClass: className, ignoreHtmlClass: '.*' } };
也就是隻處理 class為 math-tex 的標籤。