LaTeX和KaTeX的介绍

来源：网络编辑：浅尘时间：2022-01-10

历史：

上期讲到TeX，由于它是基于底层编程语言的电子排版系统，提供版面编辑的底层命令，使用时操作复杂，工作效率不高，所以基于TeX的高灵活性高可扩展性，创造出了LaTex。

LaTex（https://www.latex-project.org/）是TeX的扩展命令集合，通过整合常用的版面设置操作，降低了排版的工作量和难度。

LaTex 强大的排版功能，特别是对科技文档的支持，已经使它成为撰写科研论文的事实上的标准，它完全使用文本描述排版，对于复杂的数学公式、表格、化学分子式等完全不在话下，甚至可以排五线谱、棋谱、电路图等。

但对于前端开发而言，需求是在网页上以文本形式展示数学公式，所以只需要一个LaTeX的子集，能渲染数学公式即可。

KaTeX就是这样一个支持HTML的轻量级的数学公式引擎，它由Khan Academy（https://www.khanacademy.org/）开发，使用起来也非常简单。

npm地址：https://www.npmjs.com/package/katex

github地址：https://github.com/KaTeX/KaTeX

官网地址：https://katex.org/

第一步，引入KaTeX的JS代码与CSS样式：

第二步，通过一个简单的JS调用就可以正确渲染出数学公式：

katex.render("x=rac{-bpmsqrt{b^2-4ac}}{2a}", document.getElementById("math"));

使用JavaScript手动渲染还是稍微麻烦了一点，最好是通过Markdown按照下面的语法：

```math x=rac{-bpmsqrt{b^2-4ac}}{2a} ```

就自动渲染出数学公式：

x=2a−b±b2−4ac

如果要内嵌KaTeX公式，可以用这样的Markdown语法：

内嵌的Katex效果$`E=mc^2`$就是这样

内嵌的KaTeX效果E=mc2就是这样。

通过一点点jQuery的代码，很容易实现自动渲染。

可视化：

渲染公式很容易，但是像这样的公式：

f(x)=∫−∞∞fξe2πiξxdξ

想要正确地写出它的文本形式可不容易：

f(x)=int_{-infty}^inftywidehat fxi,e^{2pi ixi x},dxi

如果仅仅为了写个公式，就去学LaTeX语法，那没有十天半月的肯定不行。这个时候，你需要一个可视化公式编辑器（http://www.wiris.com/editor/demo/en/developers）的神器，它可以让我们可视化地编辑公式，然后自动得到它的LaTeX文本。