Featured image of post KaTeX:博客的数学公式支持

KaTeX:博客的数学公式支持

其实早在好几年前 KaTeX 刚出来的时候, 我就有关注这个 MathJax 的代替者. 不过当时好多公式符号都无法加载, 那时甚至矩阵都显示有问题. KaTeX 虽然加载公式速度很快, 但是怕我文章里有公式不能正常显示, 所以还是没有选择使用它. 不过就像很多开源软件一样, 时间能让它们变得越来越好. 诚如前段时间回归 Typecho 重新写博客一样, Markdown 和 MathJax 之间的小 Bug 得到完美解决; 如今 KaTeX 也能独当一面, 可以彻底代替 MathJax 了.

最简单的使用方法是使用了官方推荐的简单配置(使用 jsDelivr 的CDN):

1
2
3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"></script>

其中前两个是 KaTeX的基本配置,第三个是自动加载的插件。 我们只需要把这些样式引用和脚本引用放在网页合适的位置即可享受在线使用 KaTeX 公式渲染。

如果使用默认的配置,无论是行间公式还是行内公式都要用左右各两个美元符号包裹。唯一的区别在于行间公式要单行书写,而行内公式在段落内直接书写即可。不过这和 LateX、MathJax 的习惯不一致。 我们可以通过修改分隔符 delimiters 来更新上述配置,其中的display的选项代表是否开启“显示模式”(displayMode),即行间公式。我们只要在 CDN 引入配置之后添加如下代码即可:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script>
    renderMathInElement(document.body,
   {
              delimiters: [
                  {left: "$$", right: "$$", display: true},
                  {left: "$", right: "$", display: false}
              ]
          }
  );
</script>

于是便可以畅快地享受 KaTeX 的快速加载了。 KaTeX 还可以和 InstantClick 一起提速加载速度,而这一优势是 MathJax 没有的。

Typecho 的 KaTeX 插件

由于 Typecho 1.1 正式版之后它的 Markdown内核 HyperDown 得到更新,之前和其他无论是动态博客还是静态博客都一样存在的 \ 转义的 bug 得到解决,所以我们可以开心回归"正常的LaTeX写法"。如果不想要自己配置 KaTeX,可以安装 Typecho 的 KaTeX 插件。

我试用过一款名为KaTeX4Typecho的插件。由于早期 KaTeX 有一些显示bug,所以需要更新插件的 KaTeX 引用。

另外需要注意的是,Typecho 的 Markdown 并没有更新 \[ 作为行间公式,如需设置需要设置为 \\[。因此,还是推荐双美元符号的形式。

如果是使用其他静态博客程序,也有相对应的 KaTeX 插件,比如 Jeykll 的 SsKaTeX 可以在生成静态网页的同时转化 KaTeX 代码,实现了离线可用,具体可参见 Jekyll 中使用 KaTeX

Built with Hugo
Theme Stack designed by Jimmy