Markdown in Components

One great feature about MDX is that you can use Markdown within your JSX components.

Example

Lets say you wanted to create a custom <Note /> component. You could do something like this.

Using MDX 2:

import Note from './Note'
# Hello from my MDX file.
Here is my `<Note />` component.
<Note>Markdown oh **yeah**!! [Cool, right?](https://www.youtube.com/watch?v=dQw4w9WgXcQ)</Note>

CompileError: import is not supported (4:0)
1 : 
2 :     /* @jsxRuntime classic */
3 : /* @jsx mdx */
4 : import Note from './Note'
    ^^^^^^^^^^^^^^^^^^^^^^^^^

The same example, using MDX 1 (notice the need blank lines between the tags and the content):

import Note from './Note'
# Hello from my MDX file.
Here is my `<Note />` component.
<Note>
Markdown oh **yeah**!! [Cool, right?](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
</Note>

CompileError: import is not supported (4:0)
1 : 
2 :     /* @jsxRuntime classic */
3 : /* @jsx mdx */
4 : import Note from './Note'
    ^^^^^^^^^^^^^^^^^^^^^^^^^