Introduction to MDX

Install MDX in a New Gatsby Project

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

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

Replace the MDX Content Wrapper with an MDXProvider in Gatsby MDX

Create a Live Code Component with Gatsby MDX and React Live

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

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

Processing Markdown File Extensions with Gatsby MDX

Access Props inside MDX within a Gatsby Application

Building Websites with MDX and Gatsby

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.

gatsby

https://app.egghead.io/api/v1/lessons/react-compose-syntax-highlighting-and-live-code-examples-using-mdxprovider-with-gatsby-mdx/transcript

Building Websites with MDX and Gatsby

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

Social Share Links