MathJax的基本使用

dotnetcms.org工作室發表於2020-04-16

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  會載入 amsnewcommandrequire, 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 的標籤。