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 的標簽。