【Hexo】选择更高级的Markdown渲染器

---

引言

Hexo 默认搭配的 Markdown 渲染器是 hexo-renderer-marked，但其支持的渲染格式有限，不利于自由写作。因此，今天教大家如何更换为功能更加强大，渲染速度更快的 hexo-renderer-markdown-it 渲染器，并且还会详细介绍常用插件的配置，实现更优雅的 Markdown 写作。

安装

卸载 hexo-renderer-marked

npm un hexo-renderer-marked --save

安装 hexo-renderer-markdown-it

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

配置

将如下文本复制粘贴到 Hexo 的配置文件 _config.yml 的尾部

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 命令安装以下三个插件：

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

其它插件 hexo-renderer-markdown-it 渲染器自带的有，不要安装。

用法

基础

名称	描述	语法	示例
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]

进阶

markdown-it-imsize：自定义图片宽高。

语法：（注意：=100x200 前面有一个空格）

![test](image.png =100x200)

输出：

<p><img src="image.png" alt="test" width="100" height="200" /></p>

---

markdown-it-expandable：折叠/展开内容。

语法：

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

效果：

---

markdown-it-container：自定义容器。

语法

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

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

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

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

效果

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

.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 模板是 Keep，可以直接在 themes\keep\source\css\common\markdown.styl 文件末尾添加如上 CSS 内容，其它主题请自行查找控制 Markdown 渲染样式的文件。

此外，通过自定义容器可以直接实现折叠/展开内容的效果，不需要安装插件 markdown-it-expandable，并且官方已经给出了案例：

var md = require("markdown-it")();

md.use(require("markdown-it-container"), "spoiler", {
  validate: function (params) {
    return params.trim().match(/^spoiler\s+(.*)$/);
  },

  render: function (tokens, idx) {
    var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);

    if (tokens[idx].nesting === 1) {
      // opening tag
      return "<details><summary>" + md.utils.escapeHtml(m[1]) + "</summary>\n";
    } else {
      // closing tag
      return "</details>\n";
    }
  },
});

console.log(md.render("::: spoiler click me\n*content*\n:::\n"));

// Output:
//
// <details><summary>click me</summary>
// <p><em>content</em></p>
// </details>

但是笔者主要是做后端开发的，所以不太会用，不知道如何导入到主题 JS 中，如果有懂的朋友希望可以指点一下。

提示

如果不想启用某个插件，可以直接注释掉

plugins:
  - markdown-it-abbr
  # - markdown-it-deflist

拓展

自定义容器方面还是 VuePress 做的比较好，不需要任何配置，即可使用：

当然，也期待 markdown-it-container 的改进和 Hexo 的兼容。

插画

【画师】Dana 【P站ID】74451750

---

1. https://ghgxj.xyz ↩︎