MDX ― Markdown inside a (JSX)React component

You know that MDX is created to support JSX syntax inside Markdown files. It helps you to write React components inside any Markdown files. But writing markdown markup inside the JSX code inside a MDX file will require some precautions. The following code snippet(will not work) shows you what I mean:

<!-- The markdown inside paragraph element doesn't work -->

<p>
  I want to write some inline code here like `npm i`.
</p>

You can write more JSX for the above code to work.

<!-- This will work -->

<p>
  I want to write some inline code here like <code>npm i</code>.
</p>

Better solution

A better solution for this issue is to have some empty lines in your code as shown below:

<!-- This will also work -->

<p>

I want to write some inline code here like `npm i`.

</p>

Make a note of empty lines 4 and 6 above. They should not contain any spaces, otherwise the snippet wont work.

Last Updated on Dec 29, 2019