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." />