Learn what MDX is, and how you can use it when creating content for your Gatsby site.
Markdown defines a plain text syntax for HTML elements such as
a, but still supports inline HTML. An example Markdown document follows.
MDX takes this one step further, and makes it possible to use JSX in your Markdown documents. Try making the
figure element into a
Now you can import this component into your Markdown document.
To use MDX with an existing Gatsby site, add the
gatsby-plugin-mdx plugin. As with Gatsby itself, you can install it using npm. You’ll also need to install MDX itself, and the React implementation of MDX.
gatsby-plugin-mdx to your plugins list in
gatsby-config.js, and set the configuration options you prefer.
MDX enhances Markdown’s capabilities so that you can use React components anywhere in your Gatsby-powered site.
- MDX official site
- What is MDX (video)
- Adding Components to Markdown with MDX from the Gatsby docs
- Introducing JSX from the React documentation