我们经常会用 Office Word 在文档中插入数学公式,有没有想过,如何在你的网页上渲染数学公式呢?让我们走进数学,欣赏一下公式渲染的美妙之处。

一、应用场景

可以这么说:抛开场景的应用都是耍流氓

我们先来看看都有哪些场景应用到了数学公式,有个整体的印象。此外,可以扩展技术面,让你可以在做技术选型的时候游刃有余:

  • 大数据分析
    当你要做一些大数据分析的时候,可能会用到很多的算法公式。如何让读者更好的理解内容,你可能需要用到公式渲染。
  • 在线教育的数学试卷渲染
    毋庸置疑,数学包含了很多公式,很难想象一张试卷没有包含任何数学公式。
  • 富文本编辑器
    这个可能是最多的场景,甚至你一直在用,却未曾感知。例如:Word 中插入公式,CKeditor 中的公式组件。
  • 学术论文
    如果你是一个严谨的学者,肯定不会在自己论文中粘贴图片的公式,你可能需要用到公式渲染。
  • 印刷出版
    刊物印刷出版,数学公式必不可少,没有人可以忍受印在书上的图片公式。因为它可能会失真。

二、多种选择

这里主要介绍两个 JS 数学公式渲染的类库:
1.Mathjax: A JavaScript display engine for mathematics that works in all browsers. No more setup for readers. It just works.
mathjax

2.KaTex: The fastest math typesetting library for the web.

三、Mathjax 示例

先来看看 Mathjax 的例子,使用方式非常简单,我们引入类库文件:

1
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

一个简单的例子可能如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Jartto's MathJax Demo </title>
<script type="text/javascript" async
src="https://example.com/mathjax/MathJax.js?config=AM_CHTML"></script>
</head>
<body>
<p>When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and
they are</p>
<p style="text-align:center">
`x = (-b +- sqrt(b^2-4ac))/(2a) .`
</p>
</body>
</html>

再比如:

1
2
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

渲染后的结果如下:
mathjax

我们可以把表达式放到引号里,如下:

1
`ax^2 + bx + c = 0`

或者 $

1
$ax^2 + bx + c = 0$

使用很简单,详情可以看看文档

四、KaTex 示例

看完 Mathjax 之后,我们再来了解一下 KaTex
1.安装

1
2
3
4
5
6
7
8
9
# npm
npm install katex
npm install -g katex
# yarn
yarn add katex
yarn global add katex
# Browser
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.css" integrity="sha384-JwmmMju6Z7M9jiY4RXeJLoNb3aown2QCC/cI7JPgmOLsn3n33pdwAj0Ml/CMMd1W" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.js" integrity="sha384-atIluo+2Hixq8HCazSQWa1JjeC5L0CQeWAx74Q+EbqgAW4UixbrBQF4+1jvBX01b" crossorigin="anonymous"></script>

KaTex 支持大部分的浏览器:Chrome, Safari, Firefox, Opera, Edge, and IE 9–11

2.使用 Dom 渲染 TeX 表达式:

1
2
3
katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, {
throwOnError: false
});

3.反斜线需要特殊处理:

1
2
3
katex.render(String.raw`c = \pm\sqrt{a^2 + b^2}`, element, {
throwOnError: false
});

4.服务端渲染:

1
2
3
4
var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", {
throwOnError: false
});
// '<span class="katex">...</span>'

5.处理自动渲染:

  • 首先加载 js 和 css

    1
    2
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css" integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O" crossorigin="anonymous"></script>
  • 额外引入

    1
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"></script>
  • 使用方式

    1
    2
    3
    4
    5
    6
    7
    <script>
    document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {
    // jartto's demo
    });
    });
    </script>

当然,我们也可以这么使用:window.renderMathInElement(elem, options);

6.可用参数

KaTex 能支持很多的场景,缘于它可以灵活的配置。

  • displayMode
  • throwOnError
  • errorColor
  • macros
  • colorIsTextColor
  • maxSize
  • maxExpand
  • allowedProtocols
  • strict

参数定义可以看这里,我们可以根据场景来配置参数。那么如何使用呢,一个简单的例如可能如下:

1
2
3
4
5
6
katex.render("c = \\pm\\sqrt{a^2 + b^2}\\in\\RR", element, {
displayMode: true,
macros: {
"\\RR": "\\mathbb{R}"
}
});

7.异常处理

公式排版很细致,但是疏漏不可避免,这时候你可能需要了解一下公式的异常处理。


1
2
3
4
5
6
7
8
9
10
11
12
try {
var html = katex.renderToString(texString);
// '<span class="katex">...</span>'
} catch (e) {
if (e instanceof katex.ParseError) {
// KaTeX can't parse the expression
html = ("Error in LaTeX '" + texString + "': " + e.message)
.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
} else {
throw e; // other error
}
}

8.在线尝试
公式排版不是一件容易的事,为了达到更好的渲染效果,调试必不可少。还好,KaTex 为我们提供了在线调试工具。

五、优缺点

  • Mathjax 有着更全面的解析,但却丧失了体积轻量这一优势;
  • KaTex 则更加灵活,以高速渲染为优势;

所以,按照使用场景选择合适的类库吧。

六、万变不离其宗

不管是 Mathjax 还是 KaTex 其实都依赖了底层协议,也就是我们常说的 TEX

TEX(希腊语:/tɛx/[1],音译“泰赫”,文本模式下写作 TeX ),是一个由美国计算机教授高德纳(Donald Ervin Knuth)编写的功能强大的排版软件。它在学术界十分流行,特别是数学、物理学和计算机科学界。

TEX 被普遍认为是一个优秀的排版工具,特别是在处理复杂的数学公式时。

利用诸如是 LATEX 等终端软件,TEX 就能够排版出精美的文本以帮助人们辨认和查找。LATEX 是一套以 TEX 描述的宏软件。LATEX 有很多预设的模版、样式。它比 TEX 更为结构化,如包含了供创建索引、表格、列表等的宏和公用软件。

七、掌握语法

既然大家都遵守 TEX 协议,那么就好办了。我们只要掌握底层语法,不管多少个类库都只是包了一层语法糖。那么我们就从语法开始吧,这里我稍作整理,大概如下:
1.换行 \\
2.求和

1
\displaystyle\sum_0^n

3.比较

1
a \gt b

4.分数

1
\frac{2}{9}

5.圆弧

1
\overgroup{AC}

6.表格

1
\begin{array}{|c|c|c|c|c|c|}\hline年龄\left(岁\right)&12&13&14&15&16\\\hline人数&1&4&3&7&5\\\hline\end{array}

7.矩阵

1
2
3
4
\begin{matrix}
a & b \\
c & d
\end{matrix}

8.条件判断

1
2
3
4
\begin{cases}
a &\text{if } b \\
c &\text{if } d
\end{cases}

如果感兴趣,可以看这里的文档

八、实用技巧

1.公式太长,如何换行?

1
\frac{a^{2}-1}{a}÷\frac{(a-1)^{2}}{a}=\frac{(a+1)(a-1)}{a}×\frac{a}{(a-1)^{2}}=\frac{a+1}{a-1}

像这样的公式,渲染出来会特别长,甚至超出了屏幕边界,大大影响用户体验。

那我们改一下,使用折行:

1
2
3
4
\begin{alignedat}{2}
\frac{a^{2}-1}{a}÷\frac{(a-1)^{2}}{a}= \\
\frac{(a+1)(a-1)}{a}×\frac{a}{(a-1)^{2}}=\frac{a+1}{a-1}
\end{alignedat}

这样就完美了~

2.一定要使用异常捕获

1
2
3
4
5
6
7
try {
return katex.renderToString(jarttoLatex, { displayMode: true });
} catch (e) {
// TODO log error latex
console.log('katex error',e);
return jarttoLatex;
}

公式语法还是比较复杂,稍有不慎很容易出错,所以一定要 try catch。