How to add custom blocks / containers in Vuepress?

Question

I've set up a website in VuePress and I found that it supports markdown-it's :::danger, :::tip, :::info etc to generate custom containers. I was wondering if this could be extended in a way, to use for example :::card or :::example or whatever you want.

I found https://github.com/posva/markdown-it-custom-block, but can't find out how to implement it.

This is what've got in my 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";
          }
        }
      });
    }
  }

Any advice is much appreciated!

Answer 1

The script you have will work with ::: card, in order to get it to work change

extendMarkdown: md => {...

to

config: md => {...

This took me a while to figure out. It's a version conflict - that's why it's currently not working.