Markdown nested within tags

[jamesknelson]

You may have this and I just can't figure out how to do it, but...

Is it possible to nest markdown within a JSX tag?

Here's an example of how I use this within one of my articles, with MDXC:

import { Reference } from 'documentHelpers'

<Reference title='JS Reference'>
<markdown>
My explanation of `this` is a bit like high school chemistry; it's a nice idea but it may give an expert a heart attack.
<br /><br/>
If all you want to do is use React, it is probably good enough. But otherwise go read the details at [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this).
</markdown>
</Reference>

[ticky]

This will work if you add newlines between the JSX and Markdown tags, rather than using a markdown element. This is because CommonMark is strict about this separation, and MDX does not provide a markdown element (which is, I presume, MDXC’s solution to this).

Here’s your code updated to do what you expect:

import { Reference } from 'documentHelpers'

<Reference title='JS Reference'>

My explanation of `this` is a bit like high school chemistry; it's a nice idea but it may give an expert a heart attack.

<br/><br/>

If all you want to do is use React, it is probably good enough. But otherwise go read the details at [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this).

</Reference>

From this input, MDX 0.12.0 outputs this:

import { Reference } from 'documentHelpers'

export default ({components}) => <MDXTag name="wrapper"  components={components}>{`
`}<Reference title='JS Reference'>{`
`}<MDXTag name="p" components={components}>{`My explanation of `}<MDXTag name="inlineCode" components={components} parentName="p">{`this`}</MDXTag>{` is a bit like high school chemistry; it's a nice idea but it may give an expert a heart attack.`}</MDXTag>{`
`}<br/><br/>{`
`}<MDXTag name="p" components={components}>{`If all you want to do is use React, it is probably good enough. But otherwise go read the details at `}<MDXTag name="a" components={components} parentName="p" props={{"href":"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this"}}>{`MDN`}</MDXTag>{`.`}</MDXTag>{`
`}</Reference></MDXTag>

[joepie91]

This feels a bit unergonomic, to be honest.

Conceptually, an author would probably expect the entire Reference tag to be a single unit (like a paragraph would be) in the document, that contains an embedded snippet with its own spacing rules... and since a snippet of Markdown does not have leading or trailing newlines in normal usage, the double newlines between the Reference tag elements and its contents would be intuitively unexplained.

It doesn't help readability, either; it would be more readable to reserve double newlines for separating components/paragraphs of a snippet only, and to glob the Reference tags onto their content like so:

import { Reference } from 'documentHelpers'

<Reference title='JS Reference'>
My explanation of `this` is a bit like high school chemistry; it's a nice idea but it may give an expert a heart attack.

If all you want to do is use React, it is probably good enough. But otherwise go read the details at [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this).
</Reference>

<Reference title='foo'>
Some more text goes here.
</Reference>

(I don't think the <br/><br/> should be necessary if the snippet is being interpreted as a separate embedded MDX document?)