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

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

0 голосов
/ 14 ноября 2018

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

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

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

1 Ответ

0 голосов
/ 19 декабря 2018

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

extendMarkdown: md => {...

до 

config: md => {...

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

...