【Hexo】更高级的Markdown渲染器

引言

Hexo 默认搭配的 Markdown 渲染器为 hexo-renderer-marked，但其实现功能有限，于是我决定将其替换成效果更好的 hexo-renderer-markdown-it 渲染器，同时本文会介绍常用插件的配置，展示部分 emoji 的使用。

安装

卸载原有的 hexo-renderer-marked

1
npm un hexo-renderer-marked --save

安装 hexo-renderer-markdown-it

1
npm i hexo-renderer-markdown-it --save

配置

将下列文本复制粘贴到 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
markdown:
  preset: "default"
  render:
    html: true
    xhtmlOut: false
    langPrefix: "language-"
    breaks: true
    linkify: true
    typographer: true
    quotes: "“”‘’"
  enable_rules:
  disable_rules:
  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: ""
    permalink: false
    permalinkClass: "header-anchor"
    permalinkSide: "left"
    permalinkSymbol: "¶"
    case: 0
    separator: "-"

不需要的功能可以直接注释掉

插件

本章节讲述部分插件的用法、配置和注意事项

插件安装

分别使用 npm 命令安装以下三个插件：

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

其它插件 hexo-renderer-markdown-it 渲染器自带，无需自行安装。

注意：自定义容器还需要在 Hexo 的主题下的控制 Markdown 渲染样式文件中配置如下 CSS 内容：（否则不会显示背景色填充效果）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.tips {
    padding-left: 10px;
    background-color rgba(52,152,219,.3);
    border-left 4px solid rgb(52,152,219);
    color: darken(rgb(52,152,219),20%);
}
.success {
    padding-left: 10px;
    background-color rgba(46,204,113,.3);
    border-left 4px solid rgb(46,204,113);
    color: darken(rgb(46,204,113),20%);
}
.warning {
    padding-left: 10px;
    background-color rgba(241,196,15,.3);
    border-left 4px solid rgb(241,196,15);
    color: darken(rgb(241,196,15),20%);
}
.danger {
    padding-left: 10px;
    background-color rgba(231,76,60,.3);
    border-left 4px solid rgb(231,76,60);
    color: darken(rgb(231,76,60),20%);
}

如果你使用的 Hexo 模板是 Butterfly，可以直接在 themes\butterfly\source\css\_global\function.styl 文件末尾添加如上 CSS 内容。

如果你使用的 Hexo 模板是 Keep，可以在 themes\keep\source\css\common\markdown.styl 文件末尾添加如上 CSS 内容。

如果你使用的 Hexo 模板是 AnZhiYu，不需要添加这段代码，实现该部分内容可以参考安知鱼主题标签 Tag Plugins

其它主题请自行查找控制 Markdown 渲染样式的文件，然后在文件末尾添加如上 CSS 内容。

插件用法

基础

名称 描述 语法 示例
markdown-it-abbr 注释 *[HTML]: 超文本标记语言 *[HTML]: 超文本标记语言
markdown-it-emoji 表情 :) 😃
markdown-it-footnote 脚注 参考文献 [^1] 参考文献 [1]
markdown-it-ins 下划线 ++下划线++ 下划线
markdown-it-mark 突出显示 ==标记== 标记
markdown-it-sub 下标 H~2~O H2O
markdown-it-sup 上标 X^2^ X2
markdown-it-checkbox 复选框 未选：- [ ]
选中：- [x]		 未选：- [ ]
选中：- [x]

进阶

折叠、展开内容

yml文件开关：markdown-it-checkbox

语法：

1
2
3
+++ **点击折叠**
这是被隐藏的内容
+++

效果：

 点击折叠

这是被隐藏的内容


自定义容器

yml文件开关：markdown-it-container

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
::: tips
**提示**
这是一个提示
:::

::: warning
**注意**
这是一个警告
:::

::: danger
**警告**
这是一个危险信号
:::

::: success
**成功**
这是一个成功信号
:::

效果：

注意：由于本人将主题更改为 AnZhiYu 后不再支持该部分，所以无法查看该块效果，你可以自行使用上面代码后尝试该效果

Emoji 表情编码合集

emoji表情查询

  1. EMOJIALL （支持中文）

  2. Emojipedia （支持中文）

  3. Emoji Cheat Sheet （支持中文）

Markdown-It 插件文档

  1. Markdown It 插件 （支持中文）

  2. 安知鱼主题标签 Tag Plugins （支持中文）

  1. 这是参考文献 ↩︎