Extending the Markdown parser for a new Vue component

[6r1d]

Hello.

Currently, adding a new Vue component into a theme is easy. In addition to that, I'd like to know if it is possible to add a markdown-it syntax extension similar to the blocks displayed here, associating it with a new Vue component in VitePress theme.

The container code is helpful, but I don't understand how the ::: syntax is defined.

I'd like to use said component for source code blocks, separated by the version, so writing a component name in Markdown each time would be inconvenient.

[brc-dd]

What kind of syntax do you want, can you show us an example. Is it something like this:

::: foo bar
baz
:::

or simply ::: foo without any props?

If it's first one, then you can have a look at this example: #313 (comment) or https://github.com/markdown-it/markdown-it-container#example or https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/containers.ts.

If it's second one, then you can simply do:

    md.use(container, 'foo', {
      render: (tokens: Token[], idx: number) =>
        tokens[idx].nesting === 1 ? `<div class="foo">\n` : `</div>\n`
    })

[6r1d]

The example from #313 looks great, thank you!

The other part of my question is on organizing the code: is it normal to insert Vue components like <CMP title="test" /> and expect the markdown-it to parse the text as a Vue component definition, or should I somehow explain it to Markdown-it?

[brc-dd]

It should recognise them by default.