Web端数学公式展示
2017-04-07 本文已影响1705人
畵毣
作者：zjruan
日期：2016-12-23
关键词：前端、公式、LaTex、MathJax
项目开发中，我们有时候会遇到一些关于公式的需求。当遇到一些简单的公式，我们可以直接使用 css 样式或 使用 其他工具生成图片。例如：
x<sup>2</sup> + y<sup>2</sup> = 0
// 结果
x2 + y2 = 0
但是遇到一些复杂的的公式，这种方法便会变的很困难。如下图。不过如果这样的公式只是固定的、少量的，我们还可以使用其它工具生成公式，再使用截图或导出图片的方式去解决它。下图便是如此。
数学公式.png
但是当我们遇到一些大量的、可配置的公式展示需求时，上面的方法便不合适了。现在在线教育如此的火，从事这行的开发不可避免的会遇到这些问题，特别是 k12 领域。
一、有哪些方式可以渲染公式的？
动态渲染公式的方式有很多，这篇文章只是介绍其中的一种。我们先看看一些常见的。
1、word 公式编辑器
相信大部分题库系统里的题目都是用 office word 编写的。这里就不多介绍了。
2、MathML
【百度百科】mathml 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
使用方式如下：
<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>
```
>// 结果
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
但是它又一个致命问题，就是兼容性非常低，IE 和 Chrome 都不支持。
[MathML更多信息请参照这里](https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math)
### 3、第三方库渲染
这个是比较靠谱的。在自己公司没有足够的开发资源的时候，使用第三方库来解决这方面的问题，还是很值得推荐的。
本文将要描述的是使用 **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.
```
这个是它官网的简单介绍，简单的说，就是渲染公式的 js 库。
在使用之前，我们最好还需要掌握一些前置知识。我见过不少编辑公式的人都不动这个，这是使用 word 图形化工具去编写公式，其实这样效率还是蛮低的。
### LaTex
【百度百科】LaTeX（LATEX，音译“拉泰赫”）是一种基于ΤΕ
Χ的排版系统，由美国计算机学家莱斯利·[兰伯特](http://baike.baidu.com/subview/87545/15322469.htm)（Leslie Lamport）在20世纪80年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由TeX所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。
可以看到，编辑公式只是 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 服务，由 node 根据公式生成图片，再向前端返回图片地址。
如何部署 mathjax node 服务，请点击这里：[MathJax_node](https://github.com/mathjax/MathJax-node)。
#### 两种方式的优缺点：
##### 引用js库
优点： 简单，方便
缺点：引用的 mathjax 库资源较多，在渲染的过程中，可能会出现公式抖动（公式的样式会一直在变化）
#### node 服务（推荐）
优点：将公式直接生成图片，稳定，方便，兼容性强
缺点：node 服务可能不稳定，对node需要有一定了解。
