一些專業(yè)的網(wǎng)站上，有時(shí)需要進(jìn)行一些專業(yè)數(shù)字方面的展示，例如各種方程式或是數(shù)學(xué)表達(dá)式，這個(gè)時(shí)候就可以借助JS來(lái)在網(wǎng)頁(yè)中優(yōu)雅的展示你的數(shù)學(xué)公式
在一些專業(yè)的網(wǎng)站上，有時(shí)需要進(jìn)行一些專業(yè)數(shù)字方面的展示，例如各種方程式或是數(shù)學(xué)表達(dá)式，這個(gè)時(shí)候就可以借助JS來(lái)在網(wǎng)頁(yè)中優(yōu)雅的展示你的數(shù)學(xué)公式。
MathJax是一個(gè)開源的web數(shù)學(xué)公式渲染器，由JS編寫而成。MathJax允許你在你的網(wǎng)頁(yè)中包含公式，無(wú)論是使用LaTeX、MathML或者AsciiMath符號(hào)，這些公式都會(huì)被javascript處理為HTML、SVG或者M(jìn)athML符號(hào)。
- 原文來(lái)源：詳情
引入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說(shuō)明
官方提供了一個(gè)能讓我們內(nèi)聯(lián)一個(gè)配置選項(xiàng)的功能，要想讓這個(gè)內(nèi)聯(lián)配置生效就得放在
CDN引入之前。如下
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showProcessingMessages: false, //關(guān)閉js加載過(guò)程信息
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代碼高亮庫(kù)，這部分不需要處理，否則會(huì)導(dǎo)致顯示不正確,這部分是正則式，多條之間用'|'分割
},
'HTML-CSS': {
showMathMenu: false //禁用右鍵菜單
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>
MathJax 2.x 跟 MathJax 3.x 的配置信息是不同的，這部分的配置轉(zhuǎn)換可以通過(guò)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代碼高亮庫(kù)，這部分不需要處理，否則會(huì)導(dǎo)致顯示不正確,這部分是正則式，多條之間用'|'分割
processHtmlClass: 'tex2jax_process'
},
//禁用右鍵菜單
renderActions: {
addMenu: [0, '', '']
}
};
其中MathJax.Hub.Config()里的配置選項(xiàng)是重點(diǎn)，本例表示用來(lái)識(shí)別行內(nèi)公式，$來(lái)識(shí)別行間公式
書寫公式,對(duì)應(yīng)的公式在html文件中寫法如下
<body>
${x}^{(2)}\text{=}\begin{bmatrix} 1416\\\ 3\\\ 2\\\ 40 \end{bmatrix}$
</body>
顯示效果
