在搭建博客的过程中,我们出于实际的需求,在《VuePress 博客优化之拓展 Markdown 语法》中讲解了如何写一个 markdown-it插件,又在 《markdown-it 原理解析》中讲解了 markdown-it的执行原理,本篇我们将讲解具体的实战代码,帮助大家更好的写插件。

markdown-it-inline

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

  1. // Remember old renderer, if overridden, or proxy to default renderer
  2. var defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
  3. return self.renderToken(tokens, idx, options);
  4. };
  5. md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
  6. // If you are sure other plugins can't add `target` - drop check below
  7. var aIndex = tokens[idx].attrIndex('target');
  8. if (aIndex < 0) {
  9. tokens[idx].attrPush(['target', '_blank']); // add new attribute
  10. } else {
  11. tokens[idx].attrs[aIndex][1] = '_blank'; // replace value of existing attr
  12. }
  13. // pass token to default renderer.
  14. return defaultRender(tokens, idx, options, env, self);
  15. };

使用markdown-it-for-inline 后:

  1. var iterator = require('markdown-it-for-inline');
  2. var md = require('markdown-it')()
  3. .use(iterator, 'url_new_win', 'link_open', function (tokens, idx) {
  4. var aIndex = tokens[idx].attrIndex('target');
  5. if (aIndex < 0) {
  6. tokens[idx].attrPush(['target', '_blank']);
  7. } else {
  8. tokens[idx].attrs[aIndex][1] = '_blank';
  9. }
  10. });

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

  1. var iterator = require('markdown-it-for-inline');
  2. // plugin params are:
  3. //
  4. // - rule name (should be unique)
  5. // - token type to apply
  6. // - function
  7. //
  8. var md = require('markdown-it')()
  9. .use(iterator, 'foo_replace', 'text', function (tokens, idx) {
  10. tokens[idx].content = tokens[idx].content.replace(/foo/g, 'bar');
  11. });

markdown-it-container

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

markdown-it 的作者同样提供了 markdown-it-container 用于快速创建块级自定义容器。
有了这个插件,你可以这样使用 markdown 语法:

  1. ::: spoiler click me
  2. *content*
  3. :::

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

  1. var md = require('markdown-it')();
  2. md.use(require('markdown-it-container'), 'spoiler', {
  3. validate: function(params) {
  4. return params.trim().match(/^spoiler\s+(.*)$/);
  5. },
  6. render: function (tokens, idx) {
  7. // 通过 tokens[idx].info.trim() 取出 'click me' 字符串
  8. var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);
  9. // 开始标签的 nesting 1,结束标签的 nesting -1
  10. if (tokens[idx].nesting === 1) {
  11. // 开始标签
  12. return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n';
  13. } else {
  14. // 结束标签
  15. return '</details>\n';
  16. }
  17. }
  18. });

最终渲染的结果为:

  1. <details><summary>click me</summary>
  2. <p><em>content</em></p>
  3. </details>

像 VuePress 提供了自定义容器
markdown-it 插件如何写(三) - 图1
其实就是用 markdown-it-container 实现的,其实现源码为:

  1. const container = require('markdown-it-container')
  2. module.exports = md => {
  3. md
  4. .use(...createContainer('tip', 'TIP'))
  5. .use(...createContainer('warning', 'WARNING'))
  6. .use(...createContainer('danger', 'WARNING'))
  7. // ...
  8. }
  9. function createContainer (klass, defaultTitle) {
  10. return [container, klass, {
  11. render (tokens, idx) {
  12. const token = tokens[idx]
  13. const info = token.info.trim().slice(klass.length).trim()
  14. if (token.nesting === 1) {
  15. return `<div class="${klass} custom-block"><p class="custom-block-title">${info || defaultTitle}</p>\n`
  16. } else {
  17. return `</div>\n`
  18. }
  19. }
  20. }]
  21. }