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: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.
I think now we con use 'optional chaining':