Markdown 自定义容器

Vuepress 中的自定义容器

在一些特定技术环境下，Markdown 还能支持自定义容器，比如 vuepress 就支持如下四个自定义容器 tip warning danger details

::: tip 提示
这是一段提示
:::
::: warning 警告
这是一段警告
:::
::: danger 危险提示
这是一段危险提示
:::
::: details 查看隐藏文字
这是一段隐藏文字
:::

提示

这是一段提示

警告

这是一段警告

危险提示

这是一段危险提示

查看隐藏文字

这是一段隐藏文字

自己动手实现容器

npm install markdown-it-container -D

module.exports = [
  {
    token: "mdn",
    before: (params) => `<div class="mdn-block">\n<p class="mdn-block-title">${params}</p>\n`,
    after: `</div>\n`
  }
];

blocks.forEach((item, index) => {
  md.use(require("markdown-it-container"), item.token, {
    validate: function (params) {
      let reg = new RegExp(`\^${item.token}\\s+(.*)$`);
      return params.trim().match(reg);
    },
    render: function (tokens, idx) {
      let reg = new RegExp(`\^${item.token}\\s+(.*)$`);
      let m = tokens[idx].info.trim().match(reg);
      if (tokens[idx].nesting === 1) {
        return item.before(m && md.utils.escapeHtml(m[1]));
      } else {
        return item.after;
      }
    }
  });
});

.mdn-block {
  margin: 1rem 0;
  padding: 0.1rem 1.5rem;
  border-left: 0.5rem solid #005282;
  background-color: #f4f4f4;
}

::: mdn MDN
var re = new RegExp("\\w+");
:::

MDN

var re = new RegExp("\w+");