MDX equivalent for <div markdown="1"> to render Markdown within HTML tags

[dandv]

Some Markdown parsers allow parsing markdown within HTML tags by adding a markdown="1" attribute to the tag.

What is the MDX equivalent for rendering markdown into JSX tags?

[dandv]

This SO answer suggested leaving an empty line after the opening HTML (JSX) tag:

<div>

*Emphasized* text.
</div>

I tested that with Docusaurus, which uses MDX, and the text was emphasized as expected. Without the line after the div though, the text was rendered verbatim.

[ChristianMurphy]

While the StackOverflow linked does technically work, it is important to note MDX is not the same as plain markdown or marked.

Markdown and Marked treat <div> as HTML, while MDX treats it as JSX.

It's also worth noting that the newline is no longer requires in MDX 2 (see https://mdxjs.com/docs/what-is-mdx/#mdx-syntax) and that Docusaurus is moving to MDX 2 (facebook/docusaurus#4029)

[ChristianMurphy]

For MDX 1 a newline is needed.

<div>

*Emphasized* text.

</div>

For MDX 2, which is now recommended, and Docusaurus is moving to (facebook/docusaurus#4029)
No newline is needed, there is a full walkthrough of MDX 2 syntax on the website. https://mdxjs.com/docs/what-is-mdx/#mdx-syntax

[sebawita]

ooooh I am very excited about the migration to MDX 2

Does this mean that we will be able to use expressions and mix them with markdown? Like this:

import {site} from '@site/src/site.js'

[some link](mylink/bla?ver={site.myVersion})

[ChristianMurphy]

Yes, but not with that specific syntax for links.
This is supported:

import {site} from '@site/src/site.js'

<a href={site.myVersion}>some link</a>

See: wooorm/xdm#88
and https://github.com/orgs/mdx-js/discussions/1609
for background

[sebawita]

Thank you, this is very helpful 👍