Hexo主题添加数学公式渲染支持

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

更换渲染器

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

npm uni hexo-renderer-marked

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

npm i hexo-renderer-markdown-it-plus

此渲染器默认包含且开启了 @iktakahiro/markdown-it-katex 插件,可渲染 11.1 版本以前的 KaTeXKATEX 公式。但 KaTeXKATEX 自 13.0 开始渲染机制发生了变化,需要更换为 @andatoshiki/markdown-it-katex 插件。

npm install katex
npm install @andatoshiki/markdown-it-katex

并在根目录的 _config.yml 中添加如下内容,测试下来,不加下面这个也可行

markdown_it_plus:
  # ...
  plugins:
    - plugin:
      name: '@iktakahiro/markdown-it-katex'
      enable: false
    - plugin:
      name: '@andatoshiki/markdown-it-katex'
      enable: false

接着执行

hexo clean
hexo generate

以清除缓存并刷新插件配置。

配置CSS

插件安装好后,需要在每篇博客的 <head> 标签中包含 KaTeXKATEX 的CSS。考虑到国内的网络环境,可以选择360作为CDN

<link rel="stylesheet" href="https://lib.baomitu.com/KaTeX/latest/katex.min.css">

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

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

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


 上一篇
人工智能时代的技术底座:向量数据库 人工智能时代的技术底座:向量数据库
随着ChatGPT的爆火,其embedding背后的向量检索技术让大家熟知。事实上,向量数据库并非近近两年才出现的新技术,它已经存在了很长时间了。要了解什么是向量数据库,我们先来了解下什么是向量。
2024-02-21
下一篇 
MacOS系统升级后Navicat密码保存不了问题 MacOS系统升级后Navicat密码保存不了问题
macOS升级高版本系统后Navicat 15或16版本会出现无法保存数据库密码问题,报"AIled to save password error code -34018",每次重启都要重新编辑连接输入数据库密码,超级崩溃
2024-02-19
  目录