为Hexo博客添加数学公式支持

Hexo默认的Markdown渲染器(hexo-renderer-marked)未集成 MathJax 或 KaTeX,因此无法直接渲染数学公式。需将原Markdown渲染器替换为hexo-renderer-markdown-it,并安装KaTeX插件。

1. 替换Markdown渲染器

安装hexo-renderer-markdown-it渲染器及KaTeX插件:

1
2
3
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
npm install katex @renbaoshuo/markdown-it-katex

在站点配置文件中配置渲染器:

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
markdown:
preset: 'default'
render:
html: true
xhtmlOut: false
langPrefix: 'language-'
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
enable_rules:
disable_rules:
plugins:
- name: '@renbaoshuo/markdown-it-katex'
options:
skipDelimitersCheck: true
anchors:
level: 1 # 从一级标题开始渲染,否则无法正确用目录链接
collisionSuffix: ''
permalink: false
permalinkClass: 'header-anchor'
permalinkSide: 'left'
permalinkSymbol: '¶'
case: 0
separator: '-'
images:
lazyload: false
prepend_root: false
post_asset: false
inline: false # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline

此外,将以下代码插入到博客主题文件夹中的Head文件中:

1
2
3
4
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css"
/>

部分主题采用Pug编写,应将上述代码转为Pug代码后插入到Head.pug文件中:

1
link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css")

在替换主题时要记得重新操作。

2. 渲染器测试

设置好后,检测数学公式是否被正确渲染:行内公式xx,行间公式

x2+y2=1x^2+y^2=1

上述公式正常显示即表明渲染器设置正确。

0条搜索结果。