markdown-it 插件如何写（三）

前两遍笔记分别修改了渲染和解析规则，已经能满足大部分自定义插件了，这章算是一些扩展

markdown-it-inline

markdown-it 的作者提供了 markdown-it-inine 用于方便修改 inline tokens 。举个例子，如果我们给所有的链接添加 target="_blank"，正常你需要这样写：

// Remember old renderer, if overridden, or proxy to default renderer
// 记住旧的渲染器，如果被覆盖，或者代理默认渲染器
var defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
	return self.renderToken(tokens, idx, options);
};

md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
	// If you are sure other plugins can't add `target` - drop check below
    // 如果你确定其他插件不能添加 `target`，请在下面勾选
	var aIndex = tokens[idx].attrIndex('target');

  	if (aIndex < 0) {
    	tokens[idx].attrPush(['target', '_blank']); // add new attribute，添加新属性
  	} else {
    	tokens[idx].attrs[aIndex][1] = '_blank';    // replace value of existing attr，替换现有attr的值
  	}

  	// pass token to default renderer.
    // 传递令牌到默认渲染器
  	return defaultRender(tokens, idx, options, env, self);
};

使用markdown-it-for-inline 后：

var iterator = require('markdown-it-for-inline');

var md = require('markdown-it')().use(iterator, 'url_new_win', 'link_open', function (tokens, idx) {
    // 里面的写法基本和之前一样
	var aIndex = tokens[idx].attrIndex('target');

	if (aIndex < 0) {
		tokens[idx].attrPush(['target', '_blank']);
	} else {
		tokens[idx].attrs[aIndex][1] = '_blank';
	}
});

如果我们要替换掉某个文字，也可以使用 markdown-it-for-inline：

var iterator = require('markdown-it-for-inline');

// plugin params are:
//
// - rule name (should be unique)
// - token type to apply
// - function
//
var md = require('markdown-it')()
		.use(iterator, 'foo_replace', 'text', function (tokens, idx) {
    tokens[idx].content = tokens[idx].content.replace(/foo/g, 'bar');
});

markdown-it-container、::: 容器

Plugin for creating block-level custom containers for markdown-it markdown parser.

译：用于为 markdown-it md解析器创建块级自定义容器的插件

markdown-it 的作者同样提供了 markdown-it-container 用于快速创建块级自定义容器。

有了这个插件，你可以这样使用 markdown 语法：

::: spoiler click me
*content*
:::

注意这其中的 ::: 是插件定义的语法，它会取出 ::: 后的字符，在这个例子中是 warning，并提供方法自定义渲染结果：

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) {
    	// 通过 tokens[idx].info.trim() 取出 'click me' 字符串
    	var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);

    	// 开始标签的 nesting 为 1，结束标签的 nesting 为 -1
    	if (tokens[idx].nesting === 1) {
      		// 开始标签
      		return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n';
    	} else {
      		// 结束标签
      		return '</details>\n';
    	}
  	}
});

最终渲染的结果为：

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

像 VuePress 提供了自定义容器：

其实就是用 markdown-it-container 实现的，其实现 源码 为：

const container = require('markdown-it-container')

module.exports = md => {
  md
    .use(...createContainer('tip', 'TIP'))
    .use(...createContainer('warning', 'WARNING'))
    .use(...createContainer('danger', 'WARNING'))
		// ...
}

function createContainer (klass, defaultTitle) {
  return [container, klass, {
    render (tokens, idx) {
      const token = tokens[idx]
      const info = token.info.trim().slice(klass.length).trim()
      if (token.nesting === 1) {
        return `<div class="${klass} custom-block"><p class="custom-block-title">${info || defaultTitle}</p>\n`
      } else {
        return `</div>\n`
      }
    }
  }]
}