在网页中显示数学公式

在一些理科性质的网站上，往往会涉及数学公式的输入和显示，在Word中，我们可以利用 MathType 公式编辑器很容易地去编写数学公式，然而，这在 Web 中却一直是一个难题。随着互联网的普及，使用 Web 技术，我们可以非常方便地将内容推广。今天，我们就来总结一下 Web 中展现数学公式的一些可行技术。

在 Web 系统中，可以使用 Latex 语法存储数学公式，像 $a^2+b^2=c^2$ 这样，展示的时候使用 MathJax 或者 KaTex 进行 JS 渲染即可。至于 MathML 和 ASCIIMathML，由于兼容性不好，不推荐使用。

存储数学公式

1．Latex

LaTeX 基于 TeX，主要目的是为了方便排版，是当今世界上最流行和使用最为广泛的TeX格式。使用LaTeX基本上不需要使用者自己设计命令和宏等，因为LaTeX已经替你做好了。因此，即使使用者并不是很了解TeX，也可以在短短的时间内生成高质量的文档。对于生成复杂的数学公式，LaTeX表现的更为出色。在学术界的论文，尤其是数学、计算机等学科论文都是由 LaTeX 编写, 因为用它写数学公式非常方便。

Latex 实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用MathJax显示LaTex实例</title>
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
                tex2jax: {
                    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                    displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
                }
            });
        </script>
        <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>
    </head>
    <body>
        $a^2+b^2=c^2$
    </body>
</html>

显示结果为：

2．MathML

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。目前在 Netscape7.1/Mozilla/Firefox 下可以直接观看。

MathML 实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MathML实例</title>
    </head>
    <body>
        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mrow>
                <msup><mi>a</mi><mn>2</mn></msup>
                <mo>+</mo>
                <msup><mi>b</mi><mn>2</mn></msup>
                <mo>=</mo>
                <msup><mi>c</mi><mn>2</mn></msup>
            </mrow>
        </math>
    </body>
</html>

FireFox 下显示结果为：

3．ASCIIMathML

ASCIIMathML.js是一种将ASCII符号翻译成直观的MathML(HTML版本)的开源JavaScript脚本。您只要遵循简单的语法，用普通的ASCII字母和符号，就可以在网页上输入并显示出漂亮的数学公式。这些公式遵循W3C标准，同样，目前在 Netscape7.1/Mozilla/Firefox 下可以直接观看。公式的开头和结尾必须以 $ 或 ` 为标记，语法跟 LaTex 语法很像似，二者彼此兼容。

ASCIIMathML 实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ASCIIMathML 实例</title>
        <script type="text/javascript" src="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js"></script>
    </head>
    <body>
        `a^2+b^2=c^2`
    </body>
</html>

FireFox 下显示结果为：

展示数学公式

1．MathJax

MathJax是一个显示网络上数学公式的开源JavaScript引擎库，支持LaTeX，MathML和AsciiMath标记语言，允许你在网页中包含公式，无论是使用LaTeX、MathML或者AsciiMath符号，这些公式都会被JavaScript处理为HTML+CSS、SVG或者MathML符号。支持服务器端渲染，渲染过程是一个异步执行的队列。其优点是对数学公式的渲染支持度很高，缺点是生成公式的速度较慢。

2．MathML

MathML 是由国际互联网协会（W3C）于1997制定的一种基于XML（标准通用标记语言的子集）标准的数学标记语言，其优点是渲染速度快，可以像书写Html那样书写数学公式，缺点是对浏览器的兼容差，目前只有FireFox和部分webkit内核的浏览器(Safari、Opera)兼容MathML，Chrome和IE不兼容MathML，另外，用MathML语法书写过于繁琐冗长，这也许是它难以被推广的原因吧。

3．KaTex

KaTeX 是一个易于使用，号称“最快”的数学公式渲染库，是后起之秀，可汗学院的公式渲染方案。支持服务端渲染，例如服务器端使用Node.js程序调用KATEX，把渲染好的HTML片段直接发送给客户端。KaTeX支持所有主流的浏览器，其优点是并发渲染，渲染速度快。KaTex 由于发展比较晚，大约 2013 年，对 LaTex 语法的支持程度可能不如 MathJax，比如不支持中文。

使用示例

1. MathJax

MathJax调用非常方便，只需要在需要展示数学公式的页面加载 MathJax 的 js 即可，代码如下：

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
        }
    });
</script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"></script>

引入上述js就可以自动渲染数学公式。

2. Katex

使用官方自带的 CDN 的配置。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

上面，该defer属性表示在页面加载之前不需要执行脚本，从而加快了页面呈现速度，通过onload属性调用 renderMathInElement 一次自动渲染脚本内容。