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~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 的兼容。
插画
以上是关于Hexo选择更高级的Markdown渲染器的主要内容,如果未能解决你的问题,请参考以下文章