Create a Live Code Component with Gatsby MDX and React Live
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.
Instructor: [00:00] Here we have a running Gatsby project, some MDX content with a code block, and the rendered MDX content on the right. In our Gatsby browser, we already have an MDX provider set up, but we're not passing in any components yet.
[00:13] Since we're going to replace the code block with a live code block, we'll want to log out the props that are being sent to the pre tag so that we know what we're working with.
[00:24] Now we can look at the props for the pre tag. Note that the props for the pre tag are children. That child element is a code element. The props on the code element have the code that we want, as well as the language that we want to use.
[00:43] Now that we're logging out the code element's props, we can see them in the console. Note that we once again have the code that we want to output and the name of the language that we want to use to highlight.
[00:54] To implement our code block, we'll use a library called React Live. React Live allows us to pass in JavaScript code such as React components and render it onto the page alongside the code that is actually doing the rendering.
[01:07] We'll need to add React Live to our project. Now that we have our Gatsby project running again and React Live installed, we can take the demo application that React Live has in its documentation to test our implementation.
[01:23] We'll leave the imports at the top of the file and use the components in our pre component. We can save this. We can now see the code block as well as the output in our MDX content. Note that the code block currently is whatever code that we pasted in.
[01:40] We want the code to display to be the code block from our MDX file. To do this, we'll pass props.children.props.children into our live provider. Remember that the first props is the props of the pre component, while the second props are the props of the code element.
[02:01] Now we can see the code from our MDX file in the code block. To make sure that this is true, we'll change the code in our code block. We can see that the MDX content has changed. Also, if we edit the code block on the Web page, the rendering is live.
[02:15] Note that we seem to have one extra new line at the end of our code block. We can remove this by using the trim method. Note that any extra white space on the outside of our code block is gone. This is a great way to automatically make sure that there are no extra new lines at the end of your files.