Markdown inside JSX elements

[tumidi]

I'm coming from remark-directive. We have a lot of different elements which itself may contain Markdown of course. This works fine with remark-directive. On the downside the Markdown code becomes very confusing. MDX looks much cleaner.

I thoroughly searched the docs, the issues and the discussions section. It's unclear on how nested JSX elements actually work.
From experimenting it seems MDX doesn't support nested elements (which contain Markdown).

Here is a CodePen which I simplified from our project. Markdown parsing fails as soon as I nest two div elements.

There are some similar issues/discussions on interleaving but according to #628 this should work since v2 of MDX. Am I missing something here? Thank you.

[ChristianMurphy]

Heya @tumidi 👋

The source of the difference is the level of indentation changing the interpretation.
Add more spaces to your first, single level example, it will eventually stop rendering as a table.
remove some spaces from you second, multi level example, it will eventually render the table.

[tumidi]

Thanks for your quick answer. So, there is a bug with the indentation or is this expected behavior? Are there any rules regarding indentation?

The main selling point for us in favor of using remark-directive would be the nicer syntax. Indentation is important for deeply nested structures to keep things clear.

It's even advertised here

The reason for that is so you can nicely indent your components

[wooorm]

Hi!

You are correct that this is a bug. This is a bug in how parsing GFM tables works together with MDX, or, more specifically, how they work when indented code is turned off.

Here is a smaller reproduction:

<div>
  | a |
  | - |
  | b |
</div>

<div>
    | a |
    | - |
    | b |
</div>

Which you can try on https://mdxjs.com/playground/, after you turn remark-gfm on in the settings there.

The correct place to report this is https://github.com/micromark/micromark-extension-gfm-table. Can you do that? Thanks!

[tumidi]

Thanks! Sure. For reference: micromark/micromark-extension-gfm-table#10