我们经常会用 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.
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 |
|
再比如:
1 | When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are |
渲染后的结果如下:
我们可以把表达式放到引号里,如下:
1 | `ax^2 + bx + c = 0` |
或者 $
中
1 | $ax^2 + bx + c = 0$ |
使用很简单,详情可以看看文档。
四、KaTex 示例
看完 Mathjax
之后,我们再来了解一下 KaTex
:
1.安装
1 | # npm |
KaTex 支持大部分的浏览器:Chrome, Safari, Firefox, Opera, Edge, and IE 9–11
2.使用 Dom 渲染 TeX 表达式:
1 | katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, { |
3.反斜线需要特殊处理:
1 | katex.render(String.raw`c = \pm\sqrt{a^2 + b^2}`, element, { |
4.服务端渲染:
1 | var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", { |
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 | katex.render("c = \\pm\\sqrt{a^2 + b^2}\\in\\RR", element, { |
7.异常处理
公式排版很细致,但是疏漏不可避免,这时候你可能需要了解一下公式的异常处理。
1 | try { |
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 | \begin{matrix} |
8.条件判断
1 | \begin{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 | \begin{alignedat}{2} |
这样就完美了~
2.一定要使用异常捕获
1 | try { |
公式语法还是比较复杂,稍有不慎很容易出错,所以一定要 try catch。