Hexo + Butterfly 建站指南（八）使用 KaTeX 数学公式

2022年6月17日更

发现可以按照官方的方法弄了，之前一直无效（

插一嘴，因为 hexo-renderer-markdown-it 的 anchors-level 默认是 2 ，所以会有一级标题无法索引的情况，需要手动指定一下

markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false
  anchors:
    level: 1

在 Butterfly 主题里的确是有公式的设置的，在官方文档里也有教你配置的教程

但是鄙人跟着流程走下来真的一点用都没有，还是没法渲染 😭😭😭

一个不建议使用的方法

2022年4月17日深夜注：安装这个弄完后的确能正确显示公式，但点击右侧目录中的一级标题不会跳转（没有创建对应的元素），虽然我用hexo-renderer-markdown-it-plus或hexo-renderer-markdown-it的配置法在 _config.yml 中把 level 设置为了1，但好像没有什么卵用，详情请见【Hexo】关于hexo-renderer-markdown-it引起的一级目录无法跳转的错误的评论区

昨晚上网折腾了好久好久都没法解决，今早又折腾了一早上，终于成功了

（当然，如果你按照教程能成功自然更好，但是如果你也没成功的话，希望下面的经历可以帮到你）

首先解决依赖问题

npm un hexo-renderer-marked --save
npm un hexo-renderer-kramed --save
npm i hexo-math --save
npm i hexo-renderer-markdown-it-plus --save

有可能会有多余的依赖，我反正全放这了

然后前往主题配置文件，手动加上 CSS 和 JS

1
2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-bsHo4/LA+lkZv61JspMDQB9QP1TtO4IgOf2yYS+J6VdAYLVyx1c3XKcsHh0Vy8Ws" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.js" integrity="sha384-4z8mjH4yIpuK9dIQGR1JwbrfYsStrNK6MP+2Enhue4eyo0XlBDXOIPc8b6ZU0ajz" crossorigin="anonymous"></script>

最后清缓存并启动预览

1	hexo clean && hexo s

鸣谢：【Hexo】博客数学公式解决方案，亲测有效

上面是我早上的前车之鉴，晚上算是真正搞完了

首先要先换一个渲染器，十分感谢hexo markdown渲染器 @upupming/hexo-renderer-markdown-it-plus让我发现了 hexo-renderer-markdown-it-katex

先卸载旧的，如果你还装了什么其他的，要一并卸载

1	npm un hexo-renderer-marked --save

安装 hexo-renderer-markdown-it-katex

1	npm i hexo-renderer-markdown-it-katex

然后在 _config.yml 的末尾添加下面的内容，我不知道为什么就偏偏配置这个渲染器是成功的

markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
  plugins:
  anchors:
    level: 1
    collisionSuffix: ''

最后清缓存并尝试预览

1	hexo clean && hexo s

之后你就发现，既能渲染公式，一级标题的跳转也不受影响，而且你也不用手动导入什么JS或CSS，简直不要太爽