Hexo博客渲染KaTeX数学公式

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

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

更换渲染器

无论是基于MathJax 还是 $\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$ 公式。

配置CSS

插件安装好后，需要在每篇博客的 <head> 标签中包含 $\KaTeX$ 的CSS。截止到2021年1月， $\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$ 提供的 CopyTeX 插件，使得公式的 $\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>