markdown-it-alerts语法支持

1 前言

在我们使用VNote[1]写博客的时候,里面有一个功能叫警告,具体的效果可以查看这里 Bootstrap Alerts。

2 环境的准备

由于hexo本身并不自带markdown-it渲染器,所以需要将需要进行替换。

  1. 可以点击查看这里的替换教程,插件的官网方面:点击查看官网的github
  2. markdown-it渲染器本身是不支持alerts语法,所以此时需要安装markdown-it-alerts插件
  1. 由于markdown-it-alerts的插件只是寻找到对应markdown语法进行替换,css样式部分它并不负责,所以需要到网站官网去下载样式,点击下载Bootstrap样式。也可以将样式里面大部分删除,只剩下 alert 相关的CSS样式。

3 环境的配置

这里我会划分成两步:

  1. 加载Alerts所需的CSS样式
  2. 优化markdown-it-alerts插件

3.1 加载Alerts所需的CSS样式

对于加载额外的样式,可以使用hexo提供的辅助函数(Helpers)

  1. 将样式存放,即将样式放到hexo根目录/source/css/bootstrap.css
  2. 让主题加载这个新添加的样式,寻找到网页head总定义位置,一般在(hexo根目录/themes/你用的主题/layout/_partial/head.ejs),如果还是没有找到,可以看看是否在hexo根目录/themes/你用的主题/layout/layout.ejs。在head.ejs里面添加以下的一句代码
1
<%- css('/css/bootstrap.css') %>

此时就会有alerts的样式,开始下一步

3.2 优化markdown-it-alerts插件

markdown-it-alerts与VNote[1:1]在Alerts方面还是有所区别,这里就会导致一些尴尬,在VNote[1:2]写完,不能在hexo里面直接用。查看以下图表

此时需要进入到 markdown-it-alerts 插件进行语法分析修改,保证与VNote一致的语法分析。进入博客根目录/node_modules/markdown-it-alerts/index.js,打开进行修改成以下的内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
'use strict';

var container = require('markdown-it-container');

module.exports = function alerts_plugin(md, options) {
var containerOpenCount = 0;
var links = options ? options.links : true;
init();
return;

function setupContainer(name) {
md.use(container, name, {
render: function (tokens, idx) {
if (tokens[idx].nesting === 1) {
containerOpenCount += 1;
return '<div class="alert ' + name + '" role="alert">\n';
} else {
containerOpenCount -= 1;
return '</div>\n';
}
}
});
}

function isContainerOpen() {
return containerOpenCount > 0;
}

function selfRender(tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options);
}

function setupLinks() {
var defaultRender = md.renderer.rules.link_open || selfRender;

md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
if (isContainerOpen()) {
tokens[idx].attrPush(['class', 'alert-link']);
}

return defaultRender(tokens, idx, options, env, self);
};
}

function init() {
setupContainer('alert-primary');
setupContainer('alert-secondary');
setupContainer('alert-success');
setupContainer('alert-info');
setupContainer('alert-warning');
setupContainer('alert-danger');
setupContainer('alert-light');
setupContainer('alert-dark');

if (links) {
setupLinks();
}
}
};

从此VNote与hexo的alerts语法分析就一致了,可以相互使用,开始快乐的写博客吧!!!

4 效果


  1. VNote是一个更懂程序员和Markdown的笔记软件,可以查看官网了解更多。 ↩︎ ↩︎ ↩︎