一些專業(yè)的網(wǎng)站上，有時需要進行一些專業(yè)數(shù)字方面的展示，例如各種方程式或是數(shù)學(xué)表達式，這個時候就可以借助JS來在網(wǎng)頁中優(yōu)雅的展示你的數(shù)學(xué)公式
在一些專業(yè)的網(wǎng)站上，有時需要進行一些專業(yè)數(shù)字方面的展示，例如各種方程式或是數(shù)學(xué)表達式，這個時候就可以借助JS來在網(wǎng)頁中優(yōu)雅的展示你的數(shù)學(xué)公式。
MathJax是一個開源的web數(shù)學(xué)公式渲染器，由JS編寫而成。MathJax允許你在你的網(wǎng)頁中包含公式，無論是使用LaTeX、MathML或者AsciiMath符號，這些公式都會被javascript處理為HTML、SVG或者MathML符號。
- 原文來源：詳情
引入CDN
只需要在頭部添加下面這句，就可以成功引入CDN
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
</script>
內(nèi)聯(lián)config說明
官方提供了一個能讓我們內(nèi)聯(lián)一個配置選項的功能，要想讓這個內(nèi)聯(lián)配置生效就得放在
CDN引入之前。如下
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showProcessingMessages: false, //關(guān)閉js加載過程信息
messageStyle: "none", //不顯示信息
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code', 'a', 'annotation', 'annotation-xml'],
ignoreClass: 'crayon-.*' // 'crayon-' 開頭的類，屬于Wordpress代碼高亮庫，這部分不需要處理，否則會導(dǎo)致顯示不正確,這部分是正則式，多條之間用'|'分割
},
'HTML-CSS': {
showMathMenu: false //禁用右鍵菜單
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>
MathJax 2.x 跟 MathJax 3.x 的配置信息是不同的，這部分的配置轉(zhuǎn)換可以通過MathJax-demos-web中的v2 to v3
Configuration Converter。
上面的配置信息，轉(zhuǎn)換后的結(jié)果如下：
window.MathJax = {
tex: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
},
options: {
skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre','code', 'a', 'annotation', 'annotation-xml'],
ignoreHtmlClass: 'tex2jax_ignore|crayon-.*', // 'crayon-' 開頭的類，屬于Wordpress代碼高亮庫，這部分不需要處理，否則會導(dǎo)致顯示不正確,這部分是正則式，多條之間用'|'分割
processHtmlClass: 'tex2jax_process'
},
//禁用右鍵菜單
renderActions: {
addMenu: [0, '', '']
}
};
其中MathJax.Hub.Config()里的配置選項是重點，本例表示用來識別行內(nèi)公式，$來識別行間公式
書寫公式,對應(yīng)的公式在html文件中寫法如下
<body>
${x}^{(2)}\text{=}\begin{bmatrix} 1416\\\ 3\\\ 2\\\ 40 \end{bmatrix}$
</body>
顯示效果
