在一些理科性质的网站上， 往往会涉及数学公式的输入和显示，在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 一次自动渲染脚本内容。
本文已通过「原本」原创作品认证，转载请注明文章出处及链接。
