Blog 7：[Hexo教程]更高级的 Markdown 渲染器：Markdown-it

我正在使用 Markdown-it 来渲染此博文！

序

Hexo 默认使用 hexo-renderer-marked 来渲染 Markdown 文件。此渲染器只支持一些基础语法。我们可以将其替换为更高级的 Markdown-it 渲染器。

---

安装

首先，您需要卸载原有的渲染器：

npm uninstall hexo-renderer-marked --save

然后安装新的渲染器：

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

接着，您需要安装三个 Markdown-it 子插件：

npm i markdown-it-checkbox
npm i markdown-it-imsize
npm i markdown-it-expandable

请注意：科学上网。

Markdown-it 内置了许多子插件，您只需手动安装上述三个。

---

配置

在站点配置文件的尾部填写 Markdown 渲染器配置：

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: 1
    collisionSuffix: ""
    permalink: false
    permalinkClass: "header-anchor"
    permalinkSide: "left"
    permalinkSymbol: "¶"
    case: 0
    separator: "-"

要禁用某插件，您可注释该行。例如：

# - markdown-it-abbr

或者直接删了

上述代码的 level 字段表示最上级锚点的层级。当设置为 1 时，表示 <h1> 到 <h6> 都可以作为锚点。用于目录的跳转。

---

修改CSS

自定义容器的样式需要您手动修改。对于NexT主题，您需要在以下路径的文件中添加CSS样式代码：

themes\next\source\css\_common\scaffolding\base.styl

参考样式：

.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%);
}

其他主题，您可自行查找

---

调用

基础

插件	描述	语法	效果
markdown-it-abbr	注释	*[HTML]: Hyper Text Markup Language	*[HTML]: Hyper Text Markup Language
markdown-it-emoji	表情	:+1:	👍
markdown-it-footnote	脚注	文本[^1]文本	文本[1]文本
markdown-it-ins	下划线	++Inserted text++	Inserted text
markdown-it-mark	突出显示	==Marked text==	Marked text
markdown-it-sub	下标	H~2~O	H2O
markdown-it-sup	上标	X^2^	X2
markdown-it-checkbox	复选框	- []未选中 - [x]已选中	未选中 已选中

进阶

折叠

+++ **点击此处**
这是被隐藏的内容。
+++

效果：

 点击此处

这是被隐藏的内容。

自定义容器

::: tips
**提示**
这是一个提示
:::

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

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

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

效果：

提示
这是一个提示

警告
这是一个警告

危险
这是一个危险信号

成功
这是一个成功信号

---

推荐

• 查找 Emoji 的写法，您可参考：EMOJIALL

• 查阅 Markdown-it 文档，您可参考：Markdown It 插件

• 了解更多 Markdown 语法，您可参考：Markdown 教程

---

1. 这是参考文献。 ↩︎