更换渲染引擎
hexo-renderer-markdown-it渲染引擎，自带很多插件，社区也比较活跃。可以将自带的渲染引擎替换成。
-
首先卸载原有的渲染引擎
1
2
3npm un hexo-renderer-marked --save
npm un hexo-renderer-pandoc --save默认渲染引擎：hexo-renderer-marked
-
安装新引擎
npm i hexo-renderer-markdown-it --save -
在_config文件中增加配置，启用新引擎的特性，具体配置如下：
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
42markdown:
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-attrs
- 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
- 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: "-"
测试新渲染引擎
-
markdown-it-container插件，支持容器显示内容
测试
测试markdown-it-container生效 -
支持上述内容显示，还需要在主题的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
25
26// custom css for markdown-it-container
.tips {
padding-left: 10px;
background-color rgba(52,152,219,.3);
border-left 6px 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 6px 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 6px 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 6px solid rgb(231,76,60);
color: darken(rgb(231,76,60),20%);
}
