在hexo中添加mathjax支持

2月 15, 2020

在hexo中添加mathjax支持有两种方式,分别为在markdown文件内添加和更换hexo渲染器。

第一种方式:在文件内添加mathjax支持

非常简单,复制以下代码在博客正文前即可。

1
2
3
4
5
6
7
8
{% raw %}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config(
{tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}
);
</script>
{% endraw %}

需要注意的是,在clover主题中,以此方法添加的公式有两个问题:

  • 渲染后每个公式下方会多一个空行,暂未找到解决方法。
  • 公式内使用\\不可以换行,需要使用\\\\

如果您有解决方法,欢迎一起探讨交流

第二种方式:更改hexo渲染器

我们可以直接更改Hexo的渲染系统来达到使博客原生支持mathjax的效果。
共分五步。
① 将Marked替换为Kramed
在终端重定向到博客目录,使用如下命令:

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

此后,修改Kramed渲染文件。
打开博客根目录/node_modules/hexo-renderer-kramed/lib/renderer.js

1
2
3
4
5
6
7
8
9
10
11
12
13
// Change inline math rule
function formatText(text) {
// Fit kramed's rule: $$ + \1 + $$
return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
}

//将上方代码更改为下方代码

// Change inline math rule
function formatText(text) {
// Fit kramed's rule: $$ + \1 + $$
return text;
}

② 将hexo-math替换为hexo-renderer-mathjax
在刚才的终端中,使用如下命令,先卸载,后安装。

1
2
npm uninstall hexo-math --save
npm install hexo-renderer-mathjax --save

③ 更新mathjax CDN
打开博客根目录/node_modules/hexo-renderer-mathjax/mathjax.html
将最下方的mathjax的js链接替换为下方的链接,注意不要删掉html标签。

1
https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML

④ 修改默认转义规则
打开博客根目录/node_modules/kramed/lib/rules/inline.js
找到下面两行:

1
2
3
4
escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
//在第11行上下
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
//在第21行上下

分别修改为

1
2
escape: /^\\([`*\[\]()#$+\-.!_>])/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

⑤ 在主题中开启mathjax
在主题的配置文件(一般为_config.yml)中加入如下声明:

1
2
3
4
# MathJax Support
mathjax:
enable: true
per_page: true

(可选)在此后还可以在博客markdown文件开头加入mathjax开关,双保险,例如:

1
2
3
4
5
6
---
title: 在hexo中添加mathjax支持
date: 2020-02-15 14:52:33
tags: mathjax
mathjax: ture
---

About

本文参考了互联网上的两个教程,遵循开源协议精神,将其列在下方:

本人在此对两位作者表示衷心的感谢!