0%

hexo+next渲染数学公式

发表于 分类于 Valine：

博客中通常会用latex来写数学公式，但是浏览器并不总是能渲染这些公式，导致在浏览器上看是一堆latex代码，这就很烦了。有一种比较简便的方法去渲染这些公式，就是在浏览器中添加相关的mathjax插件。遗憾的是，并不能保证每个浏览器都会有相应的mathjax插件，并且浏览博客的读者浏览器也不能保证一定装了这些插件。为了从根源上解决问题，我们直接让hexo具备渲染mathjax的能力，这样无论浏览器是否开启mathjax插件，公式都可以完美呈现在读者面前。

参考博客：https://ranmaosong.github.io/2017/11/29/hexo-support-mathjax/

1. 使用Kramed 代替 Marked

Marked渲染引擎不可以渲染mathjax，但是Kramed可以。因此将hexo默认的Marked引擎卸载，装上Kramed。

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

然后，更改/node_modules/hexo-renderer-kramed/lib/renderer.js，更改：

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

变成：

1
2
3
4
5
function formatText(text) {
    // Fit kramed's rule: $$ + \1 + $$
    // return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
    return text;
}

2. 停止使用hexo-math

卸载原来的hexo-math：

1
npm uninstall hexo-math --save

安装hexo-renderer-mathjax包：

1
npm install hexo-renderer-mathjax --save

3. 更改默认转义规则

因为 hexo 默认的转义规则会将一些字符进行转义，比如 _ 转为 , 所以我们需要对默认的规则进行修改.
首先， 打开< your-hexo-project >/node_modules/kramed/lib/rules/inline.js,把下列代码：

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

更改为：

1
escape: /^\\([`*\[\]()# +\-.!_>])/,

把下列代码：

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

更改为：

1
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

4. 配置中开启mathjax

在主题 _config.yml 中开启 Mathjax， 首先找到math字段，然后修改两个enable为true，也就是将下列代码：

1
2
3
4
5
math:
  enable: false
  ...
  mathjax:
    enable: false

更改为：

1
2
3
4
5
math:
  enable: true
  ...
  mathjax:
    enable: true

需要注意的是，不同版本的next主题，上面的math和mathjax的嵌套关系可能不一致，总之就是把math和mathjax的enable全都设置为true就可以了。

5. 博客中开启mathjax

在博客的模板中添加mathjax: true，注意冒号后面是有一个空格的。

1
2
3
4
5
6
---
title: Testing Mathjax with Hexo
category: Uncategorized
date: 2017/05/03
mathjax: true
---

如果嫌弃每次都需要声明开启mathjax，可以在< your-hexo-project >/scaffolds/post.md新增一句mathjax: true

1
2
3
4
5
6
7
---
title: {{ title }}
date: {{ date }}
categories:
tags:
mathjax: true
---

6. 更新Mathjax的CDN链接（可选）

这个是可选的，一般情况下直接下载hexo-renderer-mathjax是不需要修改CDN的。如果以上配置都弄好后，还是不能渲染公式，可以尝试更新Mathjax的CDN链接。更新方法是：打开/node_modules/hexo-renderer-mathjax/mathjax.html，然后把标签\更改为：

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

注意：网上给出的CDN链接都未必百分百可用，建议多找几个试一下。可以去搜索mathjax国内cdn，参考网址：https://www.bootcdn.cn/mathjax/