Gist & Cookbook ...

小目标:每天能够提交一行代码 ...

使用markdown-it来增强hexo中默认的markdown语法

吴亮's Avatar 2019-08-03

  1. 1. 在hexo中使用markdown-it
    1. 1.1. 安装markdown-it
    2. 1.2. 在_config.yml中配置markdown-it
  2. 2. 修改markdown-it-container的样式
  3. 3. 参考资料

平时一直用typora写文档,比较喜欢typoramarkdown语法的支持,比如其中对字符的高亮,就比较好用。

因此一直在想把hexo中的markdown引擎替换成typora那般。前几天研究了一下,原来可以用markdown-it来替换。

在hexo中使用markdown-it

安装markdown-it

Hexo默认的markdown渲染引擎是marked,然后用hexo-renderer-marked做了一层封装。因此我们需要把hexo-renderer-marked先删除。

1
npm uninstall hexo-renderer-marked --save

然后我们要使用markdown-it,hexo也有对markdown-it做了封装:hexo-renderer-markdown-it

但这里需要注意一下,因为在npmjs上的npmjs/hexo-renderer-markdown-it很久没有更新了,因此我们直接安装github仓库上的。

1
npm install git+https://github.com/hexojs/hexo-renderer-markdown-it.git --save

另外,markdown-it自身有很多插件来增强语法,因此我们可以把这些插件也安装上:

1
npm install markdown-it-abbr markdown-it-checkbox markdown-it-container markdown-it-deflist markdown-it-emoji markdown-it-footnote markdown-it-imsize markdown-it-ins markdown-it-mark markdown-it-regexp markdown-it-sub markdown-it-sup --save

_config.yml中配置markdown-it

我们需要在根目录下的 _.config.yml 中配置markdown-it,添加如下配置:

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
# Markdown-it config
# Docs: https://github.com/hexojs/hexo-renderer-markdown-it/wiki
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-deflist
- markdown-it-imsize
- markdown-it-mark
- markdown-it-regexp
- markdown-it-task-checkbox
- name: markdown-it-container
options: success
- name: markdown-it-container
options: info
- name: markdown-it-container
options: warning
- name: markdown-it-container
options: danger
- markdown-it-deflist
- name: markdown-it-emoji
options:
shortcuts: {}
anchors:
level: 1
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ''

好了,markdown-it在hexo中配置就完成了哦。

修改markdown-it-container的样式

因为公司所用的文档库是Confluence,一直很喜欢Confluence的==info==的样式。在markdown-it中,也有类似的语法糖:markdown-it-container。不过我们需要在次基础上,补充一下样式:可以参考一下:hexo-renderer-markdown-it

具体样式如下:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
div.info {
border-color: #209cee;
background-color: #def0fd;
position: relative;
padding: 0.1em 1.5em;
color: #4a4a4a;
margin-bottom: 1em;
border-left: 5px solid #209cee;
}

div.info:before {
content: " ";
position: absolute;
top: 50%;
left: -14.5px;
margin-top: -12px;
width: 24px;
height: 24px;
border-radius: 50%;
text-align: center;
color: #fff;
background-size: 16px 16px;
background-position: 4px 4px;
background-repeat: no-repeat;
background-color: #209cee;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSIxNzkyIiBoZWlnaHQ9IjE3OTIiIHZpZXdCb3g9IjAgMCAxNzkyIDE3OTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyMTYgMTM0NHYxMjhxMCAyNi0xOSA0NXQtNDUgMTloLTUxMnEtMjYgMC00NS0xOXQtMTktNDV2LTEyOHEwLTI2IDE5LTQ1dDQ1LTE5aDY0di0zODRoLTY0cS0yNiAwLTQ1LTE5dC0xOS00NXYtMTI4cTAtMjYgMTktNDV0NDUtMTloMzg0cTI2IDAgNDUgMTl0MTkgNDV2NTc2aDY0cTI2IDAgNDUgMTl0MTkgNDV6bS0xMjgtMTE1MnYxOTJxMCAyNi0xOSA0NXQtNDUgMTloLTI1NnEtMjYgMC00NS0xOXQtMTktNDV2LTE5MnEwLTI2IDE5LTQ1dDQ1LTE5aDI1NnEyNiAwIDQ1IDE5dDE5IDQ1eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}

div.info p {
margin: 20px 0 20px 0 !important;
}

div.success {
border-color: #23d160;
background-color: #cbf6da;
position: relative;
padding: 0.1em 1.5em;
color: #4a4a4a;
margin-bottom: 1em;
border-left: 5px solid #23d160;
}

div.success:before {
content: " ";
position: absolute;
top: 50%;
left: -14.5px;
margin-top: -12px;
width: 24px;
height: 24px;
border-radius: 50%;
text-align: center;
color: #fff;
background-size: 16px 16px;
background-position: 4px 4px;
background-repeat: no-repeat;
background-color: #23d160;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNjcxIDU2NnEwIDQwLTI4IDY4bC03MjQgNzI0LTEzNiAxMzZxLTI4IDI4LTY4IDI4dC02OC0yOGwtMTM2LTEzNi0zNjItMzYycS0yOC0yOC0yOC02OHQyOC02OGwxMzYtMTM2cTI4LTI4IDY4LTI4dDY4IDI4bDI5NCAyOTUgNjU2LTY1N3EyOC0yOCA2OC0yOHQ2OCAyOGwxMzYgMTM2cTI4IDI4IDI4IDY4eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}

div.success p {
margin: 20px 0 20px 0 !important;
}

div.warning {
border-color: #ffdd57;
background-color: #fff6d1;
position: relative;
padding: 0.1em 1.5em;
color: #4a4a4a;
margin-bottom: 1em;
border-left: 5px solid #ffdd57;
}

div.warning:before {
content: " ";
position: absolute;
top: 50%;
left: -14.5px;
margin-top: -12px;
width: 24px;
height: 24px;
border-radius: 50%;
text-align: center;
color: #fff;
background-size: 16px 16px;
background-position: 4px 4px;
background-repeat: no-repeat;
background-color: #ffdd57;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMDg4IDEyNTZ2MjQwcTAgMTYtMTIgMjh0LTI4IDEyaC0yNDBxLTE2IDAtMjgtMTJ0LTEyLTI4di0yNDBxMC0xNiAxMi0yOHQyOC0xMmgyNDBxMTYgMCAyOCAxMnQxMiAyOHptMzE2LTYwMHEwIDU0LTE1LjUgMTAxdC0zNSA3Ni41LTU1IDU5LjUtNTcuNSA0My41LTYxIDM1LjVxLTQxIDIzLTY4LjUgNjV0LTI3LjUgNjdxMCAxNy0xMiAzMi41dC0yOCAxNS41aC0yNDBxLTE1IDAtMjUuNS0xOC41dC0xMC41LTM3LjV2LTQ1cTAtODMgNjUtMTU2LjV0MTQzLTEwOC41cTU5LTI3IDg0LTU2dDI1LTc2cTAtNDItNDYuNS03NHQtMTA3LjUtMzJxLTY1IDAtMTA4IDI5LTM1IDI1LTEwNyAxMTUtMTMgMTYtMzEgMTYtMTIgMC0yNS04bC0xNjQtMTI1cS0xMy0xMC0xNS41LTI1dDUuNS0yOHExNjAtMjY2IDQ2NC0yNjYgODAgMCAxNjEgMzF0MTQ2IDgzIDEwNiAxMjcuNSA0MSAxNTguNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
}

div.warning p {
margin: 20px 0 20px 0 !important;
}

div.danger {
border-color: #ff3860;
background-color: #ffb3c2;
position: relative;
padding: 0.1em 1.5em;
color: #4a4a4a;
margin-bottom: 1em;
border-left: 5px solid #ff3860;
}

div.danger:before {
content: " ";
position: absolute;
top: 50%;
left: -14.5px;
margin-top: -12px;
width: 24px;
height: 24px;
border-radius: 50%;
text-align: center;
color: #fff;
background-size: 16px 16px;
background-position: 4px 4px;
background-repeat: no-repeat;
background-color: #ff3860;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMDg4IDEyNDh2MjI0cTAgMjYtMTkgNDV0LTQ1IDE5aC0yNTZxLTI2IDAtNDUtMTl0LTE5LTQ1di0yMjRxMC0yNiAxOS00NXQ0NS0xOWgyNTZxMjYgMCA0NSAxOXQxOSA0NXptMzAtMTA1NmwtMjggNzY4cS0xIDI2LTIwLjUgNDV0LTQ1LjUgMTloLTI1NnEtMjYgMC00NS41LTE5dC0yMC41LTQ1bC0yOC03NjhxLTEtMjYgMTcuNS00NXQ0NC41LTE5aDMyMHEyNiAwIDQ0LjUgMTl0MTcuNSA0NXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
}

div.danger p {
margin: 20px 0 20px 0 !important;
}

具体效果如图:

参考资料

本文作者 : 吴亮
本文使用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
本文链接 : https://www.wuliang.me/markdown-it-in-hexo/

本文最后更新于 天前,文中所描述的信息可能已发生改变