Hexo Markdown 拓展

发表于 更新于 分类于 阅读次数： Waline：

使用 Markdown-it 来对 Hexo 的 Markdown 进行扩展。😃 😈 👍 💯 🚛

Hexo默认的Markdown渲染引擎不支持emoji和自定义容器，我这里把它换成了 Markdown-it。

安装：

1
2
npm un hexo-renderer-marked -S
npm i hexo-renderer-markdown-it -S

在根目录下的_config.yml文件最后添加以下配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Markdown-it config
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    # hexo-renderer-markdown-it 自带几个插件
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ''

::: tip
配置信息可参考 Github - wiki
:::

Emoji

安装emoji插件：

1
npm i markdown-it-emoji -S

编辑_config.yml文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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-emoji  # 加上这一行
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ''

md 文件中输入

1
:tada: :100: :smile:

输出

🎉 💯 😄

::: warning
如果没有显示emoji表情，可以先检查一下浏览器是否支持emoji。
:::

自定义容器

需要安装插件：

1
npm i markdown-it-container -S

配置：

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-it config
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-emoji
    # 添加以下几行
    - name: markdown-it-container
      options: success
    - name: markdown-it-container
      options: tip
    - name: markdown-it-container
      options: warning
    - name: markdown-it-container
      options: danger
    - name: markdown-it-container
      options: custom-block

markdown-it-container插件会在渲染.md文件的时候，生成一个带特定类名的div，把要提醒的区域包裹起来。

比如在.md文件中输入以下：

1
2
3
::: success
This is a success
:::

渲染之后F12查看Elements，上面的代码html结构如下：

1
2
3
<div class="success">
    <p>This is a success</p>
</div>

但是注意，此时的success类名是我们自己定义的，所以还要添加自定义的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
27
// 文件路径：themes/hexo-theme-next/source/_custom/custom.styl

// 自定义容器样式
.tip {
    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%);
}

::: warning
2020-2-1 更新
next 7.0 之后添加自定义样式请参考 973#issuecomment-511168511
:::

至此，在.md文件中输入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
::: tip
This is a tip
:::

::: success
This is a success
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

效果：

::: tip
This is a tip
:::

::: success
This is a success
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous thing
:::

目前还不支持自定义块中的标题：

1
2
3
::: danger STOP
Danger zone, do not proceed
:::

不过可以先使用#代替：

1
2
3
4
::: danger
###  STOP
Danger zone, do not proceed
:::

::: danger

STOP

Danger zone, do not proceed
:::

配色来自：Flat UI