JS配置KaTeX渲染LaTeX公式
一、前言
LaTeX \LaTeX LATEX公式在许多技术性网站中很有用，尤其是论坛类网站——支持LaTeX语法能使用户体验大大提高。
例如（摘自Demo KaTeX与Mathjax的比较）：
1
(
ϕ
5
−
ϕ
)
e
2
5
π
≡
1
+
e
−
2
π
1
+
e
−
4
π
1
+
e
−
6
π
1
+
e
−
8
π
1
+
⋯
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
(ϕ5−ϕ)e52π1≡1+1+1+1+1+⋯e−8πe−6πe−4πe−2π
当然，这种语法不是HTML本来所支持的。因此，若要在网页中显示出TeX或LaTeX公式，必须引入一些解析器。常用的解析器有Mathjax及 KaTeX \KaTeX KATEX（由于您刚才所看到的特效，可发现CSDN也是采用KaTeX渲染），通常是Javascript编写的。
Mathjax解析是一种选择——实际上，它渲染出的公式在细节上更美观，比如刚才所提到的Demo所展现的——它不会像上面那个公式一样渲染出拥挤的文字（尽管在大多数情况下没有什么区别）。
但那个页面更多地是展现出了Mathjax的缓慢：会看到渲染出整个页面所需的时间往往飞速增长——有时达到十几秒。实际上，要实现基本相同的效果，Mathjax的JS文件足足有25MB——在不太好的服务器上，仅仅加载它可能都会引起访问超时。
而KaTeX的好处在于：快。它的文件大小几乎是Mathjax的千分之一。尽管不能以此断言，但由于这一点，可以看到大部分大量使用到LaTeX的网站都是用KaTeX渲染。因此我决定写一文章，以阐述KaTeX的安装及配置。
二、安装
有多种安装方式：例如使用npm。但是我不准备加以阐述——对于浏览器中显示的网页来说，往往是使用已编译的文件来渲染。
那么，您可以使用CDN，也可以自己下载到服务器上使用。我推荐使用CDN——为了尽可能提高渲染速度，避免页面长时间被诸如$\frac{(k+1)((k+1)+1)}{2}$的东西填满。
但是，我发现有时使用官网推荐的海外服务器会出现问题（访问可能只得到一条Failed to fetch version info for katex%400.11.1.），因此推荐两个国内CDN：bootcdn.cn及staticfile.org。其中Bootcdn实际上是Bootstrap项目的一个额外分支，个人认为使用较为方便。
基本的引入模版为：
<head>
<link rel="stylesheet" href="https://cdn.bootcss.com/KaTeX/0.11.1/katex.min.css">
<script defer src="https://cdn.bootcss.com/KaTeX/0.11.1/katex.min.js"></script>
<script defer>
//KaTeX配置
</script>
<script defer src="https://cdn.bootcss.com/KaTeX/0.11.1/contrib/auto-render.min.js">
</head>
第一句引入样式表(CSS)，第二句引入基础的脚本文件（可去除.min获取可阅读的未压缩版本）。
如果只引用两句，那么您可以尝试以脚本katex.render(formula,element)来将某个元素的值替换为所需解析的内容(formula)。但书写在HTML中的公式无效。
但是第三句使得任何在HTML的文本节点中的（<pre> <code>等标签不在内），以一定定界符表示的LaTeX公式都会被解析——但是前提是我们配置了边界符。
注意其中的defer（完整写法为defer="defer"），这表明外部文件在页面加载完毕后才执行。这意味着页面在内容加载完毕但渲染还未完毕时会短暂显示出LaTeX源代码。但其好处在于，能够保证所有内容被正确地渲染，且不会中断页面的加载——至少显示出的只是源代码而不是整个页面长时间一片空白。
当然，相对于async，它还可以保证脚本按照顺序执行，这对于需要进行语法配置的情况很有用——避免在加载完所需语法前渲染，而显示出奇怪的不可预知的结果。
三、配置
如果要定义解析的边界符以及其它选项，需要在其中“KaTeX配置”的部分进行配置。实际上，KaTeX支持将一个对象作为配置信息传入。试试将后两句改成：
<script>
var katex_config = {
delimiters:
[
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false}
]
};
</script>
<script defer src="https://cdn.bootcss.com/KaTeX/0.11.1/contrib/auto-render.min.js" onload="renderMathInElement(document.body,katex_config)"></script>
其中，renderMathInElement函数指定在哪个元素内进行替换（此处为body元素），以及第二个可选参数指定所遵循的规则。
这里我们关注delimiters（意为定界符）属性，其可用值为一个包含若干个对象的数组，每个对象可有三个属性：left right及display，分别为左定界符、右定界符、是否显示为块级元素（独占一行）。
可以看到，范例设置为目前的习惯用法，即使用一对美元符$包裹一段行内公式，一对$$包裹一段块级公式（这包含在默认值中）。
delimiters默认值为：
[
{left: "$$", right: "$$", display: true},
{left: "\\(", right: "\\)", display: false},
{left: "\\[", right: "\\]", display: true}
]
后两项国内不常用，即使用\(及末尾\)包裹公式。
在网页<head>配置好上面的内容，然后在网页的某处<p>标签（或别的文本标签）中试试加进类似$$N^p+xy_2$$的内容，看看是否显示出一段公式（块级，即独占一行），或再尝试一下$D^{ab}/c$是否正确渲染成行内的。
如果都能正确渲染，那么您的 KaTeX \KaTeX KATEX已经配置成功，接下来可以尝试访问官网获取更多扩展，或者自己测试更多公式。