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 make imported components globally available across all of your MDX pages. The `MDXProvider` is able to "provide" MDX children nodes with components so you don't need to import them in every document they are used in.

You can read about the `MDXProvider` in the [MDX docs](https://mdxjs.com/migrating/v1#mdxprovider).

Or see more instructions and additional context in the [Gatsby docs for using shortcodes](https://www.gatsbyjs.org/docs/mdx/importing-and-using-components/#make-components-available-globally-as-shortcodes).

Course

Using components in Markdown with MDX

Make React components globally available as shortcodes in MDX

Share this video with your friends