hexo博客next主题添加对数学公式的支持

最新推荐文章于 2025-01-10 09:53:39 发布

阳光洒在杨树上

最新推荐文章于 2025-01-10 09:53:39 发布

阅读量2.9k

点赞数 24

分类专栏： hexo博客搭建文章标签： hexo

本文链接：https://blog.youkuaiyun.com/weixin_45511189/article/details/115798563

版权

hexo博客搭建专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Hexo博客Next主题中添加数学公式支持，包括选择合适的插件、安装配置hexo-filter-mathjax及解决语法冲突的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hexo博客默认为markdown格式，但是新搭建的hexo博客不支持公式渲染，下面介绍hexo博客next主题下添加对数学公式支持的方法。

环境说明：
hexo版本：5.4.1
next版本：最新版本（老版本已经停止更新，大家就不要再装啦！）

1、选择哪个公式插件？

打开hexo官网，在插件中搜索math，可以看到hexo官方提供两个支持数学公式的插件，分别是：
1、hexo-filter-mathjax
2、hexo-math
如下所示：
在这里插入图片描述

其中hexo-filter-mathjax只提供对mathjax数学公式，而hexo-math则提供mathjax和katex数学公式，两者均支持latex语法。笔者尝试了两种方式，最后发现实际上还是hexo-filter-mathjax更好用，原因主要有：
① hexo-filter-mathjax的格式和latex语法一致，比较简洁，而hexo-math则比较麻烦，比如我们要输入一个公式：
$sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})$
则，hexo-filter-mathjax的格式为：

$$
sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})
$$

在这里插入图片描述

而，hexo-math的格式为：

{% mathjax %}
sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})
{% endmathjax %}

在这里插入图片描述

或者

{% katex %}
sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})
{% endkatex %}

在这里插入图片描述

② hexo-filter-mathjax格式公式在VSCode中可以实时渲染（因为markdown可以渲染latex公式），而hexo-math插件支持的公式则不支持，所以如果安装的是hexo-math，则我们在VSCode中写md时无法看到公式的实时渲染。
③ 优快云同样支持markdown，所以也支持latex格式的公式，所有我们使用hexo-filter-mathjax格式写的md博客可以一次书写，多端部署，不会出现公式无法渲染的情况。
综上所述，推荐安装hexo-filter-mathjax，下面介绍hexo-filter的安装和配置。

2、安装并配置hexo-filter-mathjax

接下来介绍hexo-filter-mathjax的安装和配置步骤。
在安装过程中使用了以下描述，其含义为：
hexo目录：指的是hexo主目录（也称为站点目录），比如我的hexo博客放在 E:\Github\hexoBlog\ 目录，则我的hexo目录就是 E:\Github\hexoBlog
next主题目录：指的是你的主题目录，比如我的next主题的路径为：E:\GitHub\hexoBlog\themes\next，则我的主题目录就是：E:\GitHub\hexoBlog\themes\next
下面配置步骤中的所有命令均采用Git Bash命令行工具操作。

2.1 卸载hexo-math

首选，在hexo目录下使用下面的命令查看你是否已经安装了hexo-math插件：

npm list hexo-math

如果显示如下，则说明您没有安装hexo-math插件，这时候直接忽略2.1。
在这里插入图片描述

如果已经安装hexo-math，则会显示hexo-math版本号：
在这里插入图片描述

这时候输入以下命令将其卸载：

npm uninstall hexo-math --save

2.2 安装hexo-filter-mathjax

输入以下命令安装hexo-filter-mathjax：

npm install hexo-filter-mathjax --save

检查是否安装成功：

npm list hexo-filter-mathjax

如果显示了hexo-filter-mathjax版本号则说明安装成功。
安装成功后，我们可以进行一些全局配置，打开hexo目录下的_config.yml文件(我的是E:\Github\hexoBlog_config.yml)，在最后面添加如下的代码：

mathjax:
  tags: none # or 'ams' or 'all'
  single_dollars: true # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9 # relative CJK char width
  normal_width: 0.6 # relative normal (monospace) width
  append_css: true # add CSS to pages rendered by MathJax
  every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter

3、安装公式渲染器

hexo-math默认的公式渲染器是hexo-renderer-marked，它和markdown的语法有冲突，我们将其卸载，查看是否安装了hexo-renderer-marked公式渲染器：

npm list hexo-renderer-marked

如果安装了将其卸载：

npm uninstall hexo-renderer-marked  --save

然后我们安装一个新的公式渲染器，叫做hexo-renderer-kramed，它对hexo-renderer-marked进行了改进，在hexo目录下输入下面的命令安装：

npm install hexo-renderer-kramed --save

同样可以使用：

npm list hexo-renderer-kramed

来检查hexo-renderer-kramed是否安装成功(没成功就多试几次)。
安装成功后，我们修改以下文件的内容防止语法冲突。打开打开hexo主目录下的这个文件：E:\Github\hexoBlog\node_modules\kramed\lib\rules\inline.js，然后修改下面的规则（大家最好不要删除原代码，只是将其注释掉）：

  //escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  //修改为：
  escape: /^\\([`*\[\]()#$+\-.!_>])/,

  //em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  //修改为
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

记得保存并退出。
最后，我们打开next主题目录下的_config.yml，开启对mathjax的支持，如下所示：
在这里插入图片描述

4、公式输入测试

4.1 行间公式

$$
i\hbar\frac{\partial}{\partial t}\psi=-\frac{\hbar^2}{2m}\nabla^2\psi+V\psi
$$

在这里插入图片描述

则显示效果如下：
$i\hbar\frac{\partial}{\partial t}\psi=-\frac{\hbar^2}{2m}\nabla^2\psi+V\psi$

4.2 行内公式

行内公式两边各用一个$标识，$和公式之间切记不要有空格：

行间公式$O(f(n))=log_2^{n}$测试

在这里插入图片描述

其显示效果如下：
行间公式 $O(f(n))=log_2^{n}$ 测试
当前设置是所有博客文章自动开启对mathjax渲染支持，如果要关闭，请在文章的头部配置中关闭：
在这里插入图片描述

参考资料

hexo官网
 hexo-filter-mathjax的Github主页
 hexo-math的Github主页
 mathjax官网
 latex常用公式格式