Logo for the raulrpearson.com site

An awesome code block component

For journey-to-fullstack I created a code block that I'm quite proud of. Since I'm using MDX with Gatsby, I can easily tell the renderer to use this custom component in place of the usual bare <pre> and <code> tags.

I want to make it a bit better, so I thought I'd use this week's post to think it through and get the upgrade started. This is how it currently looks---the following code in Markdown:

Markdown source

Will produce this code block on render:

Code block render

It's quite cool already---it has nice styling, highlighting provided by Prism.js and it automatically parses the language attribute to produce a small coloured tag on the top right corner. The color adjusts to the language, for a small set of languages that I can grow as I add code blocks in new languages.

Some of the things that I'd like to add:

That's a healthy set of features. I'm sure someone has already coded this. I like javascript.info's code blocks, I also got some inspiration---namely, the colored tag---from Gatsby's docs.

What do you say, does this sound like an awesome code block component? Did I miss a killer feature? Let me know on Twitter.