Web端数学公式展示

作者：zjruan
日期：2016-12-23
关键词：前端、公式、LaTex、MathJax

项目开发中，我们有时候会遇到一些关于公式的需求。当遇到一些简单的公式，我们可以直接使用 css 样式或 使用 其他工具生成图片。例如：

x<sup>2</sup> + y<sup>2</sup> = 0

// 结果
x² + y² = 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 公式渲染

![mathjax.png](https://img.haomeiwen.com/i2139239/aee39e5db64faa7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

使用之前，我们来看一下它是什么：
```
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需要有一定了解。