Как добавить пользовательские блоки / контейнеры в Vuepress?

Question

Я создал веб-сайт в VuePress и обнаружил, что он поддерживает уценку - это::: danger,::: tip,::: info и т. Д. Для создания пользовательских контейнеров. Мне было интересно, если это можно расширить таким образом, чтобы использовать, например,::: карты или::: пример или что-то, что вы хотите.

Я нашел 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";
          }
        }
      });
    }
  }

Любой совет высоко ценится!

Answer 1

У вас будет работать скрипт ::: card, чтобы заставить его работать поменяй

extendMarkdown: md => {...

в

config: md => {...

Это заняло у меня некоторое время, чтобы выяснить. Это конфликт версий - вот почему он не работает.