Hexo博客之Markdown渲染引擎

本篇教你如何切换Hexo的Markdown渲染引擎

对比

待更新

方法

根据上方对比,目前选中 hexo-renderer-markdown-it 该引擎

安装

使用该引擎需要先卸载默认渲染引擎再安装最新的渲染引擎,否则不会生效

1
2
npm un hexo-renderer-marked --save          // 先卸载
npm i hexo-renderer-markdown-it --save // 再安装

配置

打开 站点配置文件,并在最后增加如下配置:

_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
# 修改Markdown渲染引擎,详见https://github.com/hexojs/hexo-renderer-markdown-it
markdown:
preset: 'default'
render:
html: true
xhtmlOut: false
langPrefix: 'language-'
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
enable_rules:
disable_rules:
plugins:
anchors:
level: 2
collisionSuffix: ''
permalink: false
permalinkClass: 'header-anchor'
permalinkSide: 'left'
permalinkSymbol: '¶'
case: 0
separator: '-'
images:
lazyload: false
prepend_root: false
post_asset: false

以上为官网默认配置,配置之后重新执行 hexo s,页面正常显示说明渲染成功

官方插件配置

该渲染器已内置部分插件,但默认没有开启,需要自行在 plugins 字段中进行开启:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
plugins:
- markdown-it-abbr
- markdown-it-attrs
- markdown-it-cjk-breaks
- markdown-it-container
- markdown-it-emoji
- markdown-it-footnote
- markdown-it-ins
- markdown-it-mark
- markdown-it-sub
- markdown-it-sup
- name: markdown-it-container
options: success
- name: markdown-it-container
options: tips
- name: markdown-it-container
options: warning
- name: markdown-it-container
options: danger

插件描述如下:

插件描述用法仓库
markdown-it-abbr注释*[HTML]: 超文本标记语言官网
markdown-it-attrs添加类名# 一级标题 {.title-one}官网
markdown-it-cjk-breaks删除无法转换为空格的新行官网
markdown-it-container自定义提示容器::: waring xxx :::官网
markdown-it-emojiEmoji表情显示:)官网
markdown-it-footnote脚注参考文献[^1]官网
markdown-it-ins下划线++下划线++官网
markdown-it-mark高亮标记==标记==官网
markdown-it-sub下标H~2~0官网
markdown-it-sup上标29^th^官网

自定义容器样式

使用 markdown-it-container 插件可以做到类似于 VuePress 中的提示信息样式,如下:

提示信息

成功信息

预警信息

危险信息

使用该插件渲染成了如下标签样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Markdown语法 -->
::: tips
提示信息
:::

::: success
成功信息
:::

::: warning
预警信息
:::

::: danger
危险信息
:::
<!-- 渲染之后 -->
<div class="tips"><p>提示信息</p></div>
<div class="success"><p>成功信息</p></div>
<div class="warning"><p>预警信息</p></div>
<div class="danger"><p>危险信息</p></div>

因此我们只需要设置指定类名的样式即可,修改当前Hexo博客所用主题的样式,如果有 markdown.styl 相关文件可直接修改,没有自己新建一个样式并引入即可

我这里使用的 Next主题,因此直接在 hexo-theme-next/source/css/ 下新建 _markdown.styl 文件并添加如下内容

_markdown.styl
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
// 自定义提示容器样式(提示、成功、警告、危险),可自行修改相关样式
.tips {
padding-left: 10px;
background-color: rgb(186, 226, 252);
border-left: 4px solid rgb(52, 152, 219);
color: darken(rgb(52, 152, 219), 40%);
}
.success {
padding-left: 10px;
background-color: rgb(202, 255, 231);
border-left: 4px solid rgb(66, 185, 131);
color: darken(rgb(66, 185, 131), 40%);
}
.warning {
padding-left: 10px;
background-color: rgb(255, 247, 208);
border-left: 4px solid rgb(231, 192, 0);
color: darken(rgb(231, 192, 0), 40%);
}
.danger {
padding-left: 10px;
background-color: rgb(255, 230, 230);
border-left: 4px solid rgb(204, 0, 0);
color: darken(rgb(204, 0, 0), 40%);
}

最后在 hexo-theme-next/source/css/ 下的 main.styl 中引入即可:

main.styl
1
@import '_markdown';

第三方插件配置

使用之前需要先安装相关依赖

1
2
3
npm i markdown-it-checkbox --save
npm i markdown-it-imsize --save
npm i markdown-it-expandable --save

插件描述如下:

插件描述用法仓库
markdown-it-checkbox复选框(非禁用)[ ] xxx官网
markdown-it-task-checkbox复选框(Github风格禁用样式,二选一)- [ ] xxx官网
markdown-it-imsize自定义图片大小![test](image.png =100x200)官网
markdown-it-expandable隐藏与显示内容+++ <visible_text><hidden_text>+++官网

该系列文章