MathJax的基本使用

  • 2020 年 4 月 16 日
  • 筆記

MathJax是一個開放源程式碼的JavaScript顯示引擎，適用於所有現代瀏覽器中的LaTeX、MathML和AsciMath表示法。

MathJax官網為 //www.mathjax.org   其開源文檔地址為  //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="//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

　　如果是中國用戶推薦使用Bootcdn

<script   id="MathJax-script" async src="//cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js"></script>

　　如果你想從本地載入，開源下載一個Release版本。

//github.com/mathjax/MathJax/archive/master.zip

　　如果你想本地調試器源程式碼，可以下載Source Code

//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="//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。 //demo.dotnetcms.org/math/

在這個demo里，插入數學公式時使用了如下配置：

let className = 'math-tex';

MathJax = {
  options: {
    processHtmlClass: className,
    ignoreHtmlClass: '.*'
  }
};

　　也就是只處理 class為 math-tex 的標籤。

VirMach 便宜 VPS

QNews

QNews