Import mdx, jsx, md

Import mdx, jsx, md

You can put the import statement any line in MDX file but it must follow by a newline.

Import MDX

The mdx content must be exported so that it can be imported in any mdx file.

{/* import-mdx-Highlight.mdx */}
export const Highlight = ({ children, color }) => (
    <span
        style={{
            backgroundColor: color,
            color: 'black',
        }}>
        {children}
    </span>
)

{/* Main.mdx */}
import { Highlight } from './import-mdx-Highlight.mdx';

<Highlight color="lime">Lime</Highlight>
<Highlight color="cyan">Cyan</Highlight>

Output

LimeCyan

Import plain Markdown

{/* ./import-md-Hello.md */}
#### Hello
This is plain markdown
[Openwritings.net](https://openwritings.net)

{/* Main.mdx */}
import Hello from './import-md-Hello.md';

<Hello />

Output

Hello

This is plain markdown Openwritings.net

Import JSX

{/* ./import-jsx-HighlightJSX.jsx */}
export const HighlightJSX = ({ children, color }) => (
    <span
        style={{
            backgroundColor: color,
            color: 'black',
        }}>
        {children}
    </span>
)

{/* Main.mdx */}
import { HighlightJSX } from './import-jsx-HighlightJSX.jsx';

<Highlight color="red">Red</Highlight>
<Highlight color="blue">Blue</Highlight>

Output

RedBlue