折腾了一周之久我终于解决了博客数学公式渲染错漏百出的难题, 在此处记录一下过程以便出现类似问题的朋友们探讨。
主题内的配置文件(小白错误)
如果有人和我一样第一次用hexo搭建博客而设置主题时没有在theme文件夹使用git clone xxxx(主题网站)命令克隆本地主题文件夹的话, 那么网上所说的带有math或者KaTaX的配置项在hexo自动生成的_config.yml文件里面是找不到的。如果已经配置过好多东西才发现没有部署本地文件夹的话我建议重新搭建, 别问我的仓库为什么标注的是二代目。
以我使用的Stellar主题为例,部署本地配置文件夹需要你在theme文件夹中打开Git窗口并输入以下内容:
1
|
git clone https://github.com/xaoxuu/hexo-theme-stellar.git
|
之后在文件夹中应该会出现相应的主题文件夹, 请注意: 此时的hexo自动生成的_config.yml中theme项后应当和此主题文件夹保持一致。
之后便可以在主题的文件夹中的_config.yml中进行对数学公式渲染的修改,Stellar中配置如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
# MathJax
# 需在Markdown文件开头加入mathjax: true
# 推荐使用Pandoc: npm uninstall hexo-renderer-marked --save & npm install hexo-renderer-pandoc --save
mathjax:
enable: true
cdn: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# Katex - The fastest math typesetting library for the web
# https://katex.org/docs/autorender.html
# https://github.com/KaTeX/KaTeX
# 使用 hexo-renderer-markdown-it-plus 作为公式渲染器：npm uninstall hexo-renderer-marked --save npm install hexo-renderer-markdown-it-plus --save
katex:
enable: true
min_css: <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
min_js: <script defer src="https://gcore.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
auto_render_min_js: <script defer src="https://gcore.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"onload="renderMathInElement(document.body);"></script>
|
更换渲染器
因hexo-renderer-marked不支持数学公式的渲染，因此选用hexo-renderer-kramed渲染器, 同时, 由于之前加入的hexo-render-markdown-it稍显落后, 我重新选用了一个较新版本的另一款渲染插件@upupming/hexo-renderer-markdown-it-plus。
要进行更换, 请使用如下代码:
1
2
3
|
npm un hexo-renderer-marked --save
npm i hexo-renderer-kramed --save
npm i @upupming/hexo-renderer-markdown-it-plus --save
|
由于@upupming/hexo-renderer-markdown-it-plus的功能包含全部Markdown-it的功能,故可进行Markdown-it的卸载工作。
1
|
npm un hexo-renderer-markdown-it --save
|
由于在前文Markdown-itの加持中我们进行了Markdown-it的插件配置, 所以我们可以按照如下配置写入Hexo自生成的_config.yml中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
# Markdown config
markdown_it_plus:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-cjk-breaks
- markdown-it-deflist
- markdown-it-emoji
- markdown-it-footnote
- markdown-it-ins
- markdown-it-mark
- markdown-it-sub
- markdown-it-sup
- markdown-it-checkbox
- markdown-it-imsize
- markdown-it-expandable
- name: markdown-it-container
options: success
- name: markdown-it-container
options: tips
- name: markdown-it-container
options: warning
- name: markdown-it-container
options: danger
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSide: 'left'
permalinkSymbol: ¶
|
注意: 这项工作是必要的, 若有不使用的插件可进行注释处理。
此部分参考Ann’s blog的hexo 更换 markdown渲染器 @upupming/hexo-renderer-markdown-it-plus文章进行配置, 鸣谢大佬。
渲染器的配置
对于hexo-renderer-kramed渲染器来说有较多的数学公式转义失误, 建议如下设置:
进入项目根目录下：
vim node_modules\kramed\lib\rules\inline.js
修改这么两行。
1
2
|
// escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/
|
1
2
|
// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/
|
此部分参考你别教我打游戏大佬的文章这次彻底解决在Hexo中渲染MathJax数学公式出现的问题！！！进行修改, 鸣谢大佬。
公式的输入
如果以上都操作成功还没成功渲染,那么可能是公式输入格式的问题
以本人目前遇到的问题来说有如下几点:
$xxxx$形式的行内公式输入时应保证首个$与公式头间无间隔,同理公式尾也应与$符号间无间隔$$xxxx$$形式下的行外公式可单行也可多行输入- 公式中存在
{ 和 }的应在多个大括号间插入空格
- 上下标
^ 和 _ 符号间应该存在空格, 并且该空格不会影响公式的连贯性
参考性有限警告
请注意，此篇博客是本人在使用
Hexo框架时编写，此时已不再使用，相关表达并不保证其准确性。
另外，本人在使用
Hexo时期的博客并未删除，利用
Gitee Pages服务挂载于Gitee上，截至2024年6月7日，已经无法访问，难以对效果进行截图展示。您可以自行
点击此处试图连接来观看效果，但并不保证可以访问。
高山流水觅土豆