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

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.

Instructor: [00:00] Here we have an MDX file, a running Gatsby project, and the MDX content in our Chrome window on the right-hand side. Note that we also have an MDX provider providing only a wrapper replacement for our application. To render our MDX code block with Prism syntax highlighting using the React component, we'll install prism-react-renderer.

[00:23] We can use the demo code in the readme directly to implement our initial syntax highlighting component. Note that we haven't copied the example code over. We've also hard-coded the language in our component. To ensure that our component works, we'll copy and paste the example code into the code prop.

[00:48] As you can see, our code is now syntax highlighted using Prism. To get the code block that we wrote in MDX to show up on our page, we'll access the props of the child component of the pre component. Because Markdown code blocks get compiled into a pre component wrapping a code component, we can dive one level deep to get the code.

[01:10] The language attribute in an MDX code block comes through as a class name that looks like language-className. In the case of JavaScript, it'll look like language-js. To get the language from the code component, we drill down at props.children.props.className.

[01:28] If there is no className, that means we might not have put a language on our code block, in which case we'll default to empty string. We then use a named capture group with a name of lang to get the language off the language-className.

[01:44] If there are matches -- if this does not match, matches will be null -- and there are capture groups and there's a capture group called lang, we use the result of that capture group as our language. Otherwise, we use an empty string.

[01:57] Note that this allows us to put no language on the code block or to put a language like JavaScript on the code block. Note that our syntax highlighting has now changed. Now that we have syntax highlighting set up, we can use syntax highlighting for any other language, such as Haskell, or more common languages, such as GoLang.

Course

Building Websites with MDX and Gatsby

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

Share this video with your friends