作者：zjruan
日期：2016-12-23
關(guān)鍵詞：前端、公式、LaTex、MathJax
項(xiàng)目開發(fā)中，我們有時(shí)候會(huì)遇到一些關(guān)于公式的需求。當(dāng)遇到一些簡單的公式，我們可以直接使用 css 樣式或 使用 其他工具生成圖片。例如：
x<sup>2</sup> + y<sup>2</sup> = 0
// 結(jié)果
x2 + y2 = 0
但是遇到一些復(fù)雜的的公式，這種方法便會(huì)變的很困難。如下圖。不過如果這樣的公式只是固定的、少量的，我們還可以使用其它工具生成公式，再使用截圖或?qū)С鰣D片的方式去解決它。下圖便是如此。
數(shù)學(xué)公式.png
但是當(dāng)我們遇到一些大量的、可配置的公式展示需求時(shí)，上面的方法便不合適了。現(xiàn)在在線教育如此的火，從事這行的開發(fā)不可避免的會(huì)遇到這些問題，特別是 k12 領(lǐng)域。
一、有哪些方式可以渲染公式的？
動(dòng)態(tài)渲染公式的方式有很多，這篇文章只是介紹其中的一種。我們先看看一些常見的。
1、word 公式編輯器
相信大部分題庫系統(tǒng)里的題目都是用 office word 編寫的。這里就不多介紹了。
2、MathML
【百度百科】mathml 是數(shù)學(xué)標(biāo)記語言，是一種基于XML（標(biāo)準(zhǔn)通用標(biāo)記語言的子集）的標(biāo)準(zhǔn)，用來在互聯(lián)網(wǎng)上書寫數(shù)學(xué)符號和公式的置標(biāo)語言。
使用方式如下：
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<msup> <mi>a</mi> <mn>2</mn> </msup>
<mo>+</mo>
<msup> <mi>b</mi> <mn>2</mn> </msup>
</mrow>
<mo>=</mo>
<msup> <mi>c</mi> <mn>2</mn> </msup>
</mrow>
</math>
```
>// 結(jié)果
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
但是它又一個(gè)致命問題，就是兼容性非常低，IE 和 Chrome 都不支持。
[MathML更多信息請參照這里](https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math)
### 3、第三方庫渲染
這個(gè)是比較靠譜的。在自己公司沒有足夠的開發(fā)資源的時(shí)候，使用第三方庫來解決這方面的問題，還是很值得推薦的。
本文將要描述的是使用 **MathJax** 來解決公式渲染的問題。
## 二、MathJax 公式渲染
使用之前，我們來看一下它是什么：
```
Beautiful math in all browsers
A JavaScript display engine for mathematics that works in all browsers.
No more setup for readers. It just works.
```
這個(gè)是它官網(wǎng)的簡單介紹，簡單的說，就是渲染公式的 js 庫。
在使用之前，我們最好還需要掌握一些前置知識。我見過不少編輯公式的人都不動(dòng)這個(gè)，這是使用 word 圖形化工具去編寫公式，其實(shí)這樣效率還是蠻低的。
### LaTex
【百度百科】LaTeX（LATEX，音譯“拉泰赫”）是一種基于ΤΕ
Χ的排版系統(tǒng)，由美國計(jì)算機(jī)學(xué)家萊斯利·[蘭伯特](http://baike.baidu.com/subview/87545/15322469.htm)（Leslie Lamport）在20世紀(jì)80年代初期開發(fā)，利用這種格式，即使使用者沒有排版和程序設(shè)計(jì)的知識也可以充分發(fā)揮由TeX所提供的強(qiáng)大功能，能在幾天，甚至幾小時(shí)內(nèi)生成很多具有書籍質(zhì)量的印刷品。
可以看到，編輯公式只是 latex 牛刀小試。而 mathjax 是支持 latex 排版的。
### MathJax 使用
mathjax使用主要有兩種方式：
一種是引用 mathjax 的 js 庫，然后再客戶端渲染；
```
// mathjax js引用方式
<script type="text/javascript">
window.MathJax = {
showProcessingMessages: false,
messageStyle: "none",
tex2jax: {
inlineMath: [['$', '$'], ["\\(", "\\)"]],
processEscapes: true
},
"fast-preview": {disabled: true},
CommonHTML: { linebreaks: { automatic: true } },
"HTML-CSS": { linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic: true } },
TeX: { noErrors: { disabled: true } },
MathMenu: {
styles: {
".MathJax_Menu": {"z-index":2001}
}
},
AuthorInit: function () {
MathJax.Hub.Register.StartupHook("MathMenu Ready",function () {MathJax.Menu.BGSTYLE["z-index"] = 2000;});
MathJax.Hub.processSectionDelay = 0;
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML-full"></script>
```
另一種是部署 nodejs 的mathjax 服務(wù)，由 node 根據(jù)公式生成圖片，再向前端返回圖片地址。
如何部署 mathjax node 服務(wù)，請點(diǎn)擊這里：[MathJax_node](https://github.com/mathjax/MathJax-node)。
#### 兩種方式的優(yōu)缺點(diǎn)：
##### 引用js庫
優(yōu)點(diǎn)： 簡單，方便
缺點(diǎn)：引用的 mathjax 庫資源較多，在渲染的過程中，可能會(huì)出現(xiàn)公式抖動(dòng)（公式的樣式會(huì)一直在變化）
#### node 服務(wù)（推薦）
優(yōu)點(diǎn)：將公式直接生成圖片，穩(wěn)定，方便，兼容性強(qiáng)
缺點(diǎn)：node 服務(wù)可能不穩(wěn)定，對node需要有一定了解。
