MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. 

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

Together, they combine to create a powerful platform for docs, blogs, and other rich applications.

MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast 🚀

Introduction to MDX

Gatsby and MDX make a great pairing. Here's how to set up a new project with gatsby-mdx to write pages and other content using MDX.

Install MDX in a New Gatsby Project

MDX allows you to use JSX and React components directly inline in your Markdown. Here's how.

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

MDX allows you to control the rendering of any element from your markdown document, such as the heading, paragraphs, or code blocks. MDXProvider is a component that can be used to supply React components to control the rendering for these components.

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

MDX content has a root element called `wrapper`. This element is a React.Fragment by default which can lead to some warnings if you pass props to the MDX component generated from a file, like gatsby-mdx's src/pages support does. Here's how to fix that.

Replace the MDX Content Wrapper with an MDXProvider in Gatsby MDX

One exciting use case for MDX is the ability to render markdown code blocks as live code right on your website. In this lesson, we use React Live to implement a live editable codeblock.

Create a Live Code Component with Gatsby MDX and React Live

Prism is a popular syntax highlighter in the Gatsby ecosystem. Here's how to use the more powerful and flexible component model to enable syntax highlighting in your MDX files using Prism React Renderer.

Syntax Highlighting Code Blocks using Components with Prism React Renderer and Gatsby MDX

In other videos we've gone over how to use React Live to power interactive code blocks and Prism React Renderer to power syntax highlighted code blocks. This lesson goes over how to use them both together and switch between each on a per-codeblock granularity using metastring props.

Compose Syntax Highlighting and Live Code Examples using MDXProvider with Gatsby MDX

Some platforms support .md file extensions better than they support .mdx. For this reason (or others) it can be useful to apply MDX processing to files with `.md` extensions as well as `.mdx` extensions.

Processing Markdown File Extensions with Gatsby MDX

In this lesson, you will learn how to access props from inside MDX files. This can be useful for rendering dynamic content or passing more complex data through to React components inside of your MDX files.

Building Websites with MDX and Gatsby

Instructor

Course Content