Hexo博客渲染KaTeX数学公式
fengxiaot Lv4

对于数学/物理工作者来说,一个常见的需求是想要在Hexo博客中支持复杂数学公式的渲染。MathJax 和 KaTeX\KaTeX 是两个常见的渲染引擎,MathJax 使用者多、兼容性好、但渲染速度慢,而 KaTeX\KaTeX 渲染速度快,且根号无错位,但有时有bug。本文给出基于Keep主题的 KaTeX\KaTeX 的配置方法。

此文章的内容已经过时,原因在于 KaTeX\KaTeX 在13.0版本起进行了重构,但是11.1版本仍然可以使用。

更换渲染器

无论是基于MathJax 还是 KaTeX\KaTeX,都要首先更换Hexo自带的渲染器,因为它不支持渲染复杂数学公式。

1
npm uni hexo-renderer-marked

安装 hexo-renderer-markdown-it-plus 渲染器

1
npm i @upupming/hexo-renderer-markdown-it-plus

@upupming的版本默认包含且开启了@neilsustc/markdown-it-katex 插件,可渲染 KaTeX\KaTeX 公式。


配置CSS

插件安装好后,需要在每篇博客的 <head> 标签中包含 KaTeX\KaTeX 的CSS。截止到2021年1月, KaTeX\KaTeX 比较稳定的版本是11.1。考虑到国内的网络环境,可以选择字节作为CDN

1
<link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.11.1/katex.min.css">

若主要用途为国外访问,可以使用jsDelivr

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">

若每篇博客都要使用数学公式,可以将其加入主题预定义的 head.ejs 中。


复制TeX

可以引入 KaTeX\KaTeX 提供的 CopyTeX 插件,使得公式的 TeX\TeX 源码可复制,只需在 <head> 标签中引入

1
2
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.11.1/contrib/copy-tex.min.css">
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.11.1/contrib/copy-tex.min.js"></script>