Hexo博客之Markdown渲染引擎

本篇教你如何切换Hexo的Markdown渲染引擎

本节内容参考自：
【Hexo】选择更高级的Markdown渲染器

对比

待更新

方法

根据上方对比，目前选中 hexo-renderer-markdown-it 该引擎

安装

使用该引擎需要先卸载默认渲染引擎再安装最新的渲染引擎，否则不会生效

npm un hexo-renderer-marked --save          // 先卸载
npm i hexo-renderer-markdown-it --save      // 再安装

配置

打开 站点配置文件，并在最后增加如下配置：

_config.yml

# 修改Markdown渲染引擎，详见https://github.com/hexojs/hexo-renderer-markdown-it
markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: false
    langPrefix: 'language-'
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  enable_rules:
  disable_rules:
  plugins:
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: false
    permalinkClass: 'header-anchor'
    permalinkSide: 'left'
    permalinkSymbol: '¶'
    case: 0
    separator: '-'
  images:
    lazyload: false
    prepend_root: false
    post_asset: false

以上为官网默认配置，配置之后重新执行 hexo s，页面正常显示说明渲染成功

官方插件配置

该渲染器已内置部分插件，但默认没有开启，需要自行在 plugins 字段中进行开启：

plugins:
  - markdown-it-abbr
  - markdown-it-attrs
  - markdown-it-cjk-breaks
  - markdown-it-container
  - 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

插件描述如下：

插件	描述	用法	仓库
markdown-it-abbr	注释	*[HTML]: 超文本标记语言	官网
markdown-it-attrs	添加类名	# 一级标题 {.title-one}	官网
markdown-it-cjk-breaks	删除无法转换为空格的新行		官网
markdown-it-container	自定义提示容器	::: waring xxx :::	官网
markdown-it-emoji	Emoji表情显示	:)	官网
markdown-it-footnote	脚注	参考文献[^1]	官网
markdown-it-ins	下划线	++下划线++	官网
markdown-it-mark	高亮标记	==标记==	官网
markdown-it-sub	下标	H~2~0	官网
markdown-it-sup	上标	29^th^	官网

自定义容器样式

使用 markdown-it-container 插件可以做到类似于 VuePress 中的提示信息样式，如下：

提示信息

成功信息

预警信息

危险信息

使用该插件渲染成了如下标签样式：

<!-- Markdown语法 -->
::: tips
提示信息
:::

::: success
成功信息
:::

::: warning
预警信息
:::

::: danger
危险信息
:::
<!-- 渲染之后 -->
<div class="tips"><p>提示信息</p></div>
<div class="success"><p>成功信息</p></div>
<div class="warning"><p>预警信息</p></div>
<div class="danger"><p>危险信息</p></div>

因此我们只需要设置指定类名的样式即可，修改当前Hexo博客所用主题的样式，如果有 markdown.styl 相关文件可直接修改，没有自己新建一个样式并引入即可

我这里使用的 Next主题，因此直接在 hexo-theme-next/source/css/ 下新建 _markdown.styl 文件并添加如下内容

_markdown.styl

// 自定义提示容器样式（提示、成功、警告、危险），可自行修改相关样式
.tips {
    padding-left: 10px;
    background-color: rgb(186, 226, 252);
    border-left: 4px solid rgb(52, 152, 219);
    color: darken(rgb(52, 152, 219), 40%);
}
.success {
    padding-left: 10px;
    background-color: rgb(202, 255, 231);
    border-left: 4px solid rgb(66, 185, 131);
    color: darken(rgb(66, 185, 131), 40%);
}
.warning {
    padding-left: 10px;
    background-color: rgb(255, 247, 208);
    border-left: 4px solid rgb(231, 192, 0);
    color: darken(rgb(231, 192, 0), 40%);
}
.danger {
    padding-left: 10px;
    background-color: rgb(255, 230, 230);
    border-left: 4px solid rgb(204, 0, 0);
    color: darken(rgb(204, 0, 0), 40%);
}

最后在 hexo-theme-next/source/css/ 下的 main.styl 中引入即可:

main.styl

@import '_markdown';

第三方插件配置

使用之前需要先安装相关依赖

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

插件描述如下：

插件	描述	用法	仓库
markdown-it-checkbox	复选框(非禁用)	[ ] xxx	官网
markdown-it-task-checkbox	复选框(Github风格禁用样式，二选一)	- [ ] xxx	官网
markdown-it-imsize	自定义图片大小		官网
markdown-it-expandable	隐藏与显示内容	+++ <visible_text><hidden_text>+++	官网

该系列文章

• 想要了解基础搭建教程请移步这里：[Hexo博客之基础搭建教程]

• 想要了解主题配置教程请移步这里：[Hexo博客之NexT配置教程]

• 想要了解高级优化教程请移步这里：[Hexo博客之高级优化教程]

• 想要了解Markdown教程请移步这里：[Hexo博客之Markdown教程]