Introduction to MDX

Set up a Gatsby site to use MDX with gatsby-plugin-mdx with a default layout

Import and use a React component in Markdown with MDX

Use a React Component from NPM in an MDX File with Gatsby MDX

Create a Table of Contents Component for MDX Documents in Gatsby

Create a Live Code Component with Gatsby MDX and React Live

Make React components globally available as shortcodes in MDX

Use MDXProvider to Control the Rendering of Markdown Elements with Gatsby MDX

Style Components Rendered By MDX with Theme UI in Gatsby

Using components in Markdown with MDX

Learn how to install and configure `gatsby-plugin-mdx` in a Gatsby site, so that you can begin to import and render React components inline with your markdown.

Get additional context and instructions in the [Gatsby docs](https://www.gatsbyjs.org/docs/mdx/getting-started/#add-mdx-to-an-existing-gatsby-site)

gatsby

https://app.egghead.io/api/v1/lessons/gatsby-set-up-a-gatsby-site-to-use-mdx-with-gatsby-plugin-mdx-with-a-default-layout/transcript

Using components in Markdown with MDX

Set up a Gatsby site to use MDX with gatsby-plugin-mdx with a default layout

Social Share Links