如何在 Vuepress 中添加自定义块/容器？答案

【问题标题】：How to add custom blocks / containers in Vuepress?如何在 Vuepress 中添加自定义块/容器？
【发布时间】：2019-04-17 03:34:35
【问题描述】：

我在 VuePress 中建立了一个网站，发现它支持 markdown-it's :::danger, :::tip, :::info 等来生成自定义容器。我想知道这是否可以以某种方式扩展，例如使用 :::card 或 :::example 或任何你想要的。

我找到了https://github.com/posva/markdown-it-custom-block，但不知道如何实现。

这就是我的 config.js 中的内容

markdown: {
    // options for markdown-it-anchor
    anchor: { permalink: false },
    // options for markdown-it-toc
    toc: { includeLevel: [1, 2] },
    extendMarkdown: md => {
      md.use(require("markdown-it-container"), "card", {
        validate: function(params) {
          return params.trim().match(/^card\s+(.*)$/);
        },

        render: function(tokens, idx) {
          var m = tokens[idx].info.trim().match(/^card\s+(.*)$/);

          if (tokens[idx].nesting === 1) {
            // opening tag
            return (
              "<card><summary>" + md.utils.escapeHtml(m[1]) + "</summary>\n"
            );
          } else {
            // closing tag
            return "</card>\n";
          }
        }
      });
    }
  }

非常感谢任何建议！

【问题讨论】：

标签： vue.js markdown vuepress markdown-it

【解决方案1】：

您拥有的脚本将与 ::: card 一起使用，以使其工作更改

extendMarkdown: md => {...

到

config: md => {...

我花了一段时间才弄清楚。这是一个版本冲突 - 这就是它目前不起作用的原因。

【讨论】：