Bug: A header directly after a JSX opening tag will not render as an <h1>

[Flaque]

Overview

Markdown headers don't render correctly when there's no space in between the JSX opening tag.

Example failure

Take the following code:

import Styles from "./styles.js";

<Styles>
# hello, world!

</Styles>

This will render without an H1:

Example success

If we add a space, like in the following:

import Styles from "./styles.js";

<Styles>

# hello, world!

</Styles>

This will render an h1 version:

[timneutkens]

So actually writing markdown in between jsx tags is not supported. You've actually ran into an edge case with the compiler 😄

So the output of this is correct:

import Styles from "./styles.js";

<Styles>
# hello, world!

</Styles>

And this isn't, even though it's hard for us to actually parse it out, this is an edge case:

import Styles from "./styles.js";

<Styles>

# hello, world!

</Styles>

So what happens when you add an extra line is that every line becomes a paragraph, it's also wrapped as such, but since we don't touch any content of a jsx tag, the result will be wrapped between the tags.

[Flaque]

Ohhhh interesting! :O

writing markdown in between jsx is not supported

Could it be? Would there be an issue with it?

[timneutkens]

Could it be? Would there be an issue with it?

It's very complex and out of scope for mdx imho. Basically what we do now is turn html nodes into jsx nodes, and then just render the "raw" jsx inside the transpiled jsx document.

Also the markdown cheatsheet is mentioning: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#inline-html

Markdown in HTML
Does *not* work **very** well. Use HTML tags.

[silvenon]

Closing this because we're tracking a similar issue #241. I would like this to work in the future somehow, but we could use some API suggestion. 😃