Markdown Snippets
Including other Markdown files in Markdown
You can include other Markdown files in a Markdown file by making use of the import
statement & MDX.
Quick Start
Create a snippet
First, we will create a snippet called snippet.mdx
that we will import into another Markdown file.
snippet.mdx
### Hello world
This is my snippet.
Import the snippet
Next, we will import the snippet into our MDX file using an import
statement. It compiles to a React component, so we can render it with <Snippet />
.
example.mdx
import Snippet from './snippet.mdx'
# Example
This is an example of including a snippet in a Markdown file.
<Snippet />
Output
The resulting output will look like this:
Example
This is an example of including a snippet in a Markdown file.
Hello world
This is my snippet.
Tip: Passing Props
As we are just rendering a React component, we can also pass props to <Snippet />
. We can access those props in the MDX file with the props
global variable.
example.mdx
import Snippet from './snippet.mdx'
# Example
This is an example of including a snippet in a Markdown file.
<Snippet title="Hello world" content="This is my snippet." />