本文作者:IMWeb jerytang 原文出处:IMWeb社区 未经同意,禁止转载
LaTex 是基于 Tex 的排版系统,常用于科技出版物的排版。和 word 等排版工具的最大区别在于,它是纯文本格式的,掌握基本的规则,就能输出专业美观的展示效果。纯文本格式,也就意味着它不像 word 那样,所见即所得,对初学者不友好。
Tex 作为一个比较古老的排版工具,在 linux、windows 和 mac 上都有发行版。比较常用的是 TeXlive、CTex套装、MiKTeX。不过安装过程挺痛苦的,完整版有 3G 以上。TexLive 安装过程参见 官方文档。
还有一些周边的配套工具比如 ghostscript、imagemagick,来进行文件格式的转换,比如,LaTex 默认是输出 pdf 文件的,但是要在web上显示公式,一般都用 png 或者 gif 格式。
安装好 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 的数学公式用美元符号包裹起来。
公式语法举例:
pdf 是矢量格式的,在web上,一般通过图片的方式展示。需要借助上面所说的工具 imagemagick,转为 web 图片格式。
一方面,LaTex 用于科技排版,展示非常美观,另一方面,LaTex 的编辑环境,对于熟悉了 word 这种所见即所得的工具,一般人不容易掌握。
web 上的公式展示,主要是用图片,曾经 FireFox 浏览器支持 MathML,可是 Chrome 一直没有支持。
同时,也涌现了一些基于 HTML(svg)+CSS LaTex 渲染实现。但是,这些方案只实现了 Latex 非常少的一部分功能——公式渲染。
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]);
相对于 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>
跟 MathJax、KaTex 不同,MathQuill 是一个真正意义上的公式编辑器,一边输入一边渲染,输出可以是 Tex,但是对于复杂的公式,这种输入方式还是有很大的局限性,输入过程还是需要记住一些 LaTex 命令。
使用 MathJax、KaTex 方案的共同问题是用 HTML、CSS 来渲染公式,非常冗长,如果采用了服务器端渲染,很容易超出数据库字段的长度限制,比如,我们就遇到过超出 MySQL Text 类型的 64k 长度限制。
一个简单的公式,就会产生很多 HTML 结构。
所以,使用传统的 LaTex 引擎,将 Tex 代码转为 pdf,再转为 png,不失为一种简单可行的方案。后续文章将会展开实施这套传统的后台渲染公式方案。