Parse markdown inside HTML

[tonai]

It would be great if markdown inside HTML could be parsed (like for MDX2).

Regarding this markdown (Alert being a custom vue component with a slot):

<div>Hello `div`</div>
<Alert>Hello `alert`</Alert>

I would expect:

<div>Hello <code>div</code></div>
<Alert>Hello <code>alert</code></Alert>

Current result:

<div>Hello `div`</div>
<Alert>Hello `alert`</Alert>

The case with the custom Vue component was working (markdown inside the component was parsed) in version 0.1.0 but removed in version 0.1.1 with the addition of the componentPlugin .

[meteorlxy]

Hi, sorry for delay.

The reason is that before 0.1.0 we were not strictly followed the markdown-it spec to handle html tags/vue components.

If you try it on raw markdown-it, any markdown syntax inside a html tag in a single line will be kept as is.

That might not be intuitive, but that's the commonmark spec defines how to treat HTML tags inside markdown.

[tonai]

No problem. It is kind of a shame because MDX2 syntax is really handy.

The only workaround is to add additional blank spaces:

<Alert>

Hello `alert`

</Alert>

But in that case there will be an additionnal <p> tag:

<Alert>

<p>Hello <code>alert</code></p>

</Alert>

Is there any other option ?

[meteorlxy]

Maybe we could add a loose mode for that.

[meteorlxy]

Alternatively, to make it looks more markdown-like, you can also make use of some plugins like markdown-it-container to render the component.

There are some sample usage for the container plugin:

• Vitepress: https://vitepress.vuejs.org/guide/markdown#custom-containers
• Vuepress: https://v2.vuepress.vuejs.org/reference/default-theme/markdown.html

[tonai]

Thanks for the feedback