Hexo博客渲染KaTeX数学公式
对于数学/物理工作者来说,一个常见的需求是想要在Hexo博客中支持复杂数学公式的渲染。MathJax 和 是两个常见的渲染引擎,MathJax 使用者多、兼容性好、但渲染速度慢,而 渲染速度快,且根号无错位,但有时有bug。本文给出基于Keep主题的 的配置方法。
此文章的内容已经过时,原因在于 在13.0版本起进行了重构,但是11.1版本仍然可以使用。
更换渲染器
无论是基于MathJax
还是 ,都要首先更换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
插件,可渲染 公式。
配置CSS
插件安装好后,需要在每篇博客的 <head>
标签中包含 的CSS。截止到2021年1月, 比较稳定的版本是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
可以引入 提供的 CopyTeX 插件,使得公式的 源码可复制,只需在 <head>
标签中引入
1 | <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.11.1/contrib/copy-tex.min.css"> |