Hexo选择更高级的Markdown渲染器

Posted Xavier Jiezou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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~OH2O
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 ↩︎

以上是关于Hexo选择更高级的Markdown渲染器的主要内容,如果未能解决你的问题,请参考以下文章

Hexo 下 Markdown 的配置与学习

CCF202006-3 Markdown渲染器(100分)文本处理

如何让Hexo不渲染某些文件

配置HEXO

配置HEXO

阿里云开发零基础免费搭建个人Hexo博客