使用KaTeX代替MathJax渲染公式

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

为了方便, 所以还是使用了官方自带的 CDN 的简单配置.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1-beta/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 中修改. 于是添加如下配置:

<script>
    renderMathInElement(document.body,
   {
              delimiters: [
                  {left: "$$", right: "$$", display: true},
                  {left: "$", right: "$", display: false}
              ]
          }
  );
</script>

最后终于开心地发现博客里的数学公式加载变快了, 同时 KaTeX 和 InstantClick 也没有像 MathJax 一样有时候出现加载到一半(mathjax快速预览)的冲突. 赞!

whzecomjm
2018年7月12日

Update

应评论要求明确一下使用方法: 在博客的首页 index 文件 (或者 header) 中的 <head> 中加载如下脚本即可.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1-beta/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>
<script>
    renderMathInElement(document.body,
   {
              delimiters: [
                  {left: "$$", right: "$$", display: true},
                  {left: "$", right: "$", display: false}
              ]
          }
  );
</script>

2019-06-18

使用KaTeX代替MathJax渲染公式

Update

推荐阅读更多精彩内容