Hexo渲染latex公式的最新选择

为何更换 Hexo Markdown 渲染器

由于我原本使用的 hexo-renderer-kramed 已经很久没有更新了，并且与新版本的 highlight.js 发生冲突，导致无法使用最新的代码高亮主题。因此，我决定寻找一个新的 Markdown 渲染器来替代它。

可选的 Hexo Markdown 渲染器

在网上搜索了一下有几种选择：

• hexo-renderer-marked

  • 描述：Hexo 默认的 Markdown 渲染器。
  • 缺陷：不支持 Mathjax、插件扩展以及 emoji 表情。
  • GitHub 地址：hexojs/hexo-renderer-marked
  • NPM 地址：hexo-renderer-marked

• hexo-renderer-kramed

  • 描述：基于 hexo-renderer-marked 的二次开发，主要完善了对 Mathjax 的支持。好多年没维护了，导致有点落后。
  • 缺陷：缺乏维护。
  • GitHub 地址：sun11/hexo-renderer-kramed
  • NPM 地址：hexo-renderer-kramed

• hexo-renderer-pandoc

  • 描述：支持 Mathjax 语法，不仅限于 Markdown，还支持 Textile、reStructuredText 等多种格式。
  • 缺陷：渲染慢，过于重型，依赖于外置的 Pandoc 软件。
  • GitHub 地址：wzpan/hexo-renderer-pandoc
  • NPM 地址：hexo-renderer-pandoc

• hexo-renderer-markdown-it

  • 描述：我的新选择
  • GitHub 地址：hexojs/hexo-renderer-markdown-it
  • NPM 地址：hexo-renderer-markdown-it

• hexo-renderer-markdown-it-plus

  • 描述：新选择的不在维护的 fork
  • GitHub 地址：CHENXCHEN/hexo-renderer-markdown-it-plus
  • NPM 地址：hexo-renderer-markdown-it-plus

更换过程

当然是先卸载啦

npm uninstall hexo-renderer-kramed

然后是安装新的渲染器

npm install hexo-renderer-markdown-it --save
npm install @traptitech/markdown-it-katex --save

然后改 hexo 配置

1. 打开 hexo 项目的根目录中的 _config.yml 文件。
2. 添加 Markdown 插件配置：

   # _config.yml
   markdown:
       plugins:
           - "@traptitech/markdown-it-katex"

3. 更新 Markdown 渲染器配置：

   # _config.yml
   markdown: markdown-it-plus

改主题配置比如我的 _config.fluid.yml

在 _config.fluid.yml 文件中启用和配置 katex 作为数学公式引擎

# _config.fluid.yml
math:
    enable: true # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `math: true`
    specific: false # 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
    engine: katex # 公式引擎 available: mathjax | katex

KaTex 速度更快而且支持更多的样式呢

比如原本渲染不出来的这些，现在都不需要用图片替代了呢。

附上package.json

@ -12,6 +12,7 @@
    "version": "7.3.0"
  },
  "dependencies": {
+   "@traptitech/markdown-it-katex": "^3.6.0",
    "hexo": "^7.3.0",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
@ -19,10 +20,10 @@
    "hexo-generator-sitemap": "^3.0.1",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
-   "hexo-renderer-kramed": "^0.1.4",
-   "hexo-renderer-mathjax": "^0.6.0",
+   "hexo-renderer-markdown-it": "^7.1.1",
    "hexo-renderer-stylus": "^3.0.1",
    "hexo-server": "^3.0.0",
    "hexo-theme-fluid": "^1.9.8"
  }