Fix the bug that latex formula does not render in hexo-fluid

修复时间：2023-10-15

参考该连接修复：https://blog.51cto.com/AomanHao/6185050

Step 1. 更换 markdown 渲染引擎

更换 Hexo 的 markdown 渲染引擎为 hexo-renderer-kramed 引擎，后者支持 mathjax 公式输出。

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

Step 2. 更改kramed渲染逻辑

更改kramed渲染逻辑，不再替换 \ 和 $ 等latex关键符号。

1
vim node_modules\hexo-renderer-kramed\lib\renderer.js

Change context

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

Step 3. hexo-math 替换 mathjax

停止使用 hexo-math，并安装 mathjax 包。

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

Step 4. 更新 Mathjax 配置文件

更新 Mathjax 配置文件。

1
vim node_modules/hexo-renderer-mathjax/mathjax.html

change context

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>

<!-- 添加新的js import -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<!-- 注释旧的js import -->
<!-- <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> -->

Step 5. 更改kramed默认转义规则

更改kramed默认转义规则 escape 和 em

1
vim node_modules/kramed/lib/rules/inline.js

change context

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var inline = {
  // escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()# +\-.!_>])/,
  autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
  url: noop,
  html: /^<!--[\s\S]*?-->|^<(\w+(?!:\/|[^\w\s@]*@)\b)*?(?:"[^"]*"|'[^']*'|[^'">])*?>([\s\S]*?)?<\/\1>|^<(\w+(?!:\/|[^\w\s@]*@)\b)(?:"[^"]*"|'[^']*'|[^'">])*?>/,
  link: /^!?\[(inside)\]\(href\)/,
  reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
  nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
  reffn: /^!?\[\^(inside)\]/,
  strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
  // em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
  br: /^ {2,}\n(?!\s*$)/,
  del: noop,
  text: /^[\s\S]+?(?=[\\<!\[_*`$]| {2,}\n|$)/,
  math: /^\$\$\s*([\s\S]*?[^\$])\s*\$\$(?!\$)/,
};

Step 6. 开启 latex 功能

Substep 1. 配置文件 开启 mathjax

打开 /theme/themeName 主题目录下的 config.yml 文件

我们需要在 config.yml 文件 中开启 Mathjax，找到 mathjax 字段添加如下代码：(不同的主题配置方法略微有区别)

1
2
mathjax:
    enable: true

或者

1
mathjax: true

Substep 2. 文档开启 mathjax

文档头添加 mathjax: true。

1
2
3
4
title: 修复hexo latex公式不渲染问题
date: 2023-10-15 17:23:21
mathjax: true
tags: hexo

效果验证

行内公式

书写方法

1
$ E = mc^2 $

实际效果

$ E = mc^2$

行间公式带换行

书写方法

1
2
3
4
5
$$
S \in \{0, 1\} \\
E \in \{1, 2, 3, 4, 5, ..., 254\} \\ 
1 + N = (1 +  \sum_{i=1}^{23}{b_{23-i}2^{-i}}) \subset [1, 2-2^{-23}]
$$

实际效果 \[ S \in \{0, 1\} \\ E \in \{1, 2, 3, 4, 5, ..., 254\} \\ 1 + N = (1 + \sum_{i=1}^{23}{b_{23-i}2^{-i}}) \subset [1, 2-2^{-23}] \]