动手微调KaTeX，让你的博客完美显示数学公式（下）

2021-02-17 20:46 作者:晓雾喵 0人读过 | 我要投稿

KaTeX 怎么用

上文中介绍了大佬们为了在电脑上显示数学公式做出的努力，并介绍了目前数学公式表示的事实上标准——LaTeX，对比了 MathJax 和 KaTeX 这两款最常用的渲染数学公式的Web模块。本篇就专门讲讲 KaTeX 究竟怎么用，如何对其微调。

KaTeX 安装

首先需要安装 KaTeX。作为 JavaScript 库（模块），或者说是脚本，最常规的模式就是在网页中载入脚本文件，由浏览器解析绘制。

普通的网页加载

使用现代模块化前端技术的网页

如果是基于 NodeJS 服务端的应用，是配合模块在服务端先渲染完成静态的HTML文件展示给客户端

多脚本解析时间不一致可能出错

考虑到不同浏览器载入 JavaScript 脚本文件的机制可能不同，有时候会出现脚本没有完全解析完就开始绘制渲染公式引发错误。这时候可以考虑在<script>标签中加入一个 defer 属性。

HTML在浏览器解析时，遇到属性为defer的脚本会在后台进行下载，但是并不会阻止文档的解析。当页面解析完成，所有的defer脚本加载完毕后按照顺序执行，执行完毕后会触发DOMContentLoaded事件，也就是开始渲染公式。

KaTeX 配置

完成安装后，要在网页中创建、调用 KaTeX 对象，不过这一步可以通过引用官方的 auto-render.min.js 脚本完成。

我们可以专注于如何配置 KaTeX，如下代码所示是 KaTeX 常用的配置方法。

分隔符

分隔符用于限定 KaTeX 的代码范围，可以手动指定多种不同的分隔符。前文中说过，对于公式排版来说，有内嵌（Inline）、显示（Display）两种文字环绕方式，前者表示公式与文字混排，和其它正文在同一行中；后者表示公式单独列出一行，内容居中。

在 Markdown 中，$ 是最常用的公式分隔符，$ 表示 inline，$$ 表示 display，如下配置。

配置宏

宏可以用于设置别名（alias）或缩短指令长度。

例如，宏可以解决前文说到的大于等于号或小于等于号样式不一致的问题。我们可以通过指定宏，例如将 \ge 替换为 \geqslant，这样不用修改 LaTeX 代码就可以统一不等号的样式。

KaTeX 样式调整

默认的 KaTeX 与 MathJax 绘制公式的文字都会略大于标准文字大小，如 KaTeX 的默认大小为 1.21em，在与正文混排时看起来会打破和谐。我们可以根据 KaTeX 的官方文档，在 katex.min.css 中将.katex 字体大小修改为 1.1em ，这样的配置可以让公式与正文保持一致的大小，是最为合适的。

KaTeX 扩展

KaTeX 提供了很多扩展功能方便有额外需求的人使用。

比如KaTeX在绘制玩公式后，如果去选中公式，复制后得到的是一串没有格式的字母，而使用copy-tex扩展直接复制页面上的公式为 LaTeX 代码。

只需要在网页中加入css文件和脚本

如果你是化学相关专业的从业人员、学生或老师，可以使用 mhchem 扩展，不受 LaTeX 的语法束缚，用最简明的代码写出规范的化学方程式。

同样的，只需要在网页中加入下面脚本

更换 STIX 字体

在 katex.min.css 中，引用具体的字体文件，定义成字体族名，再对 CSS 绘制的公式各个部分应用不同的字体样式，这就是 KaTeX 核心的渲染功能。

因此，在最初的尝试，我将字体定义的文件路径修改为 STIX 文件的绝对路径。然而 CSS 中引用绝对路径的文件存在跨域的问题，触发服务器安全机制，无法正常加载字体文件。最终我决定，直接替换原有的字体文件。

查看 KaTeX 默认字体的文件列表（以 woff 为例，除此之外还有 ttf、woff2 格式的同名文件）

MathJax 提供了很多数学字体，有 Asana Math，Gyre Pagella，Latin Modern，Neo Euler，STIX Web 等等。有 eot、otf、woff 格式，我们以 STIX 字体的 woff 格式为例，再将 woff 转换为 KaTeX 对应需要的 woff2、ttf 格式。

可以看到 MathJax 的 STIX 字体分割地非常详细，和 KaTeX 的字体差别较大，因此绝不能完整地替换。使用 FontCreator 软件对两种字体的字模分析对比后，我发现 STIXMathJax_Main 的字模足以覆盖 KaTeX_Main、KaTeX_Math 两个文件，而且字符的内部名称也一致，替换后可能的问题最少。

因此，替换到原有的字体文件后，再将 CSS 中 KaTeX_Main、KaTeX_Math 指向同一文件。