LaTex数理化公式展示方案简介

本文作者：IMWeb jerytang 原文出处：IMWeb社区 未经同意，禁止转载

LaTex 是什么

LaTex 是基于 Tex 的排版系统，常用于科技出版物的排版。和 word 等排版工具的最大区别在于，它是纯文本格式的，掌握基本的规则，就能输出专业美观的展示效果。纯文本格式，也就意味着它不像 word 那样，所见即所得，对初学者不友好。

LaTex 环境配置

Tex 作为一个比较古老的排版工具，在 linux、windows 和 mac 上都有发行版。比较常用的是 TeXlive、CTex套装、MiKTeX。不过安装过程挺痛苦的，完整版有 3G 以上。TexLive 安装过程参见 官方文档。

还有一些周边的配套工具比如 ghostscript、imagemagick，来进行文件格式的转换，比如，LaTex 默认是输出 pdf 文件的，但是要在web上显示公式，一般都用 png 或者 gif 格式。

LaTex 语法展示

安装好 LaTex 编译环境后，就可以使用 LaTex 命令编译文档了。

新建一个文档 hello.tex：

\documentclass{article}
\begin{document}
Vieta's formulas $\frac{-b \pm \sqrt{b^2-4ac}}{2a}$
\end{document}

Tex 的语法是一种标记语言（Markup Language），就像 HTML 一样，但是语法看起来有点怪异。

第 1 行代码是说，这个文档的类型（documentclass） 是文章 article。还有其它的文档类型，比如书籍(book)、幻灯片(beamer)、作业题(exam)。

然后，第 2 行，文档的正文开始。

第 3 行，首先是纯文本，英文的韦达公式，接着是一个 $ 开始，表示嵌入一个数学公式，$ 公式结束。和 word 不同，这里的公式是用纯文本表示的。

最后，文档结束。这就是一个简单的 LaTex 文挡。下面将其转为 pdf 文档。科技文档一般都是 pdf 格式的。

执行编译命令：

得到一个 pdf 文档：

这个 pdf 的展示效果如下：

LaTex 中的数学公式

LaTex 的数学公式用美元符号包裹起来。

公式语法举例：

将 pdf 转为 png 用于 web 展示

pdf 是矢量格式的，在web上，一般通过图片的方式展示。需要借助上面所说的工具 imagemagick，转为 web 图片格式。

LaTex 的 web 替代品及其存在问题

一方面，LaTex 用于科技排版，展示非常美观，另一方面，LaTex 的编辑环境，对于熟悉了 word 这种所见即所得的工具，一般人不容易掌握。

web 上的公式展示，主要是用图片，曾经 FireFox 浏览器支持 MathML，可是 Chrome 一直没有支持。

同时，也涌现了一些基于 HTML(svg)+CSS LaTex 渲染实现。但是，这些方案只实现了 Latex 非常少的一部分功能——公式渲染。

MathJax

MathJax 出现于 2011 年，发展至今已经有 6、7 个年头了。其特点是对数学公式的渲染支持度很高。

对开发者来讲，其缺点是 js API 有点奇怪，渲染比较慢，好在支持服务器端渲染。

MathJax 首先有个配置文件：

MathJax.Hub.Config({
  extensions: ["tex2jax.js"],
  jax: ["input/TeX", "output/SVG"],
  tex2jax: {
    inlineMath: [
      ['$', '$'],
      ["\\(", "\\)"],
    ],
    displayMath: [
      ['$$', '$$'],
      ["\\[", "\\]"]
    ],
    processEscapes: true
  },
  "SVG": {
    availableFonts: ["TeX"]
  }
});

然后将调用渲染API，转为美观的LaTex效果，如下。由于渲染很慢，所以渲染过程是一个异步执行的队列。

MathJax.Hub.Queue(['Typeset', MathJax.Hub]);

KaTex

相对于 MathJax， KaTex 是后起之秀，是可汗学院的公式渲染方案。API 设计，对前端工程师更加友好。KaTex 的特点是渲染很快，见下图的对比，左边是 KaTex，右边是 MathJax。

KaTex 的 API 是一个同步调用。

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

KaTex 由于发展比较晚，大约 2013 年，对 LaTex 语法的支持程度可能不如 MathJax，比如不支持中文。

KaTex 也支持服务器端渲染。

var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}");
//=> <span class="katex">...</span>

MathQuill

跟 MathJax、KaTex 不同，MathQuill 是一个真正意义上的公式编辑器，一边输入一边渲染，输出可以是 Tex，但是对于复杂的公式，这种输入方式还是有很大的局限性，输入过程还是需要记住一些 LaTex 命令。

小结

使用 MathJax、KaTex 方案的共同问题是用 HTML、CSS 来渲染公式，非常冗长，如果采用了服务器端渲染，很容易超出数据库字段的长度限制，比如，我们就遇到过超出 MySQL Text 类型的 64k 长度限制。

一个简单的公式，就会产生很多 HTML 结构。

所以，使用传统的 LaTex 引擎，将 Tex 代码转为 pdf，再转为 png，不失为一种简单可行的方案。后续文章将会展开实施这套传统的后台渲染公式方案。