前言#

老实说如何在 hexo 中渲染数学公式卡了我非常长的时间，可能是版本问题，我试过网上很多种下载插件的方式，但都没办法用：

我这里始终显示 CDN 接口连接超时，所以我就开始尝试使用 KaTeX 的本地渲染。

Step1: 获取 KaTeX#

前往 KaTeX/KaTeX，下载最新的 Release。

解压后将文件夹放入可访问路径中，注意：是从外部可访问的路径！

Step2: 安装 hexo-math#

首先，在 hexo 中安装 hexo-math：

1
npm install hexo-math

然后，在 hexo 的 _config.yml 配置文件中增加如下内容：

1
# hexo-math
2
math:
3
  enable: true
4
  engine: katex

Step3: 配置 hexo#

最后，我们需要将 KaTeX 的接口添加到 hexo 中。

这里根据安装的主题不同有所差异，例如我安装的 Next 主题，路径就是：

theml >> next >> layout >> _partials >> head >> head.swig

在 head.swig 中增加 KaTeX 的接口：

1
<link rel="stylesheet" href="xxx/katex.min.css" crossorigin="anonymous">
2
<script defer src="xxx/katex.min.js" crossorigin="anonymous"></script>
3
<script defer src="xxx/contrib/auto-render.min.js" crossorigin="anonymous"></script>

打个公式测试一下，a_1=b^1+1

$a_1=b^1+1$

其他#

1
<script>
2
  document.addEventListener("DOMContentLoaded", function() {
3
    renderMathInElement(document.body, {
4
    delimiters: [
5
      {left: '$$', right: '$$', display: true},
6
      {left: '$', right: '$', display: false},
7
    ],
8
    throwOnError : false
9
    });
10
  });
11
</script>