Introduction
I’ve recently spent a good amount of time (probably too much) customizing the code blocks on my blog here to my exact liking. There’s much more I want to do, but I’m really proud of how they turned out and I want to share with you how I created them!
Its my humble opinion that good code blocks are some of the most beautiful pieces of user interface on the web.
When I think of a good dev blog or good dev docs; I think of beautiful, rich, elegant code blocks that show blocks of code in context with the post. Done well, code blocks can really enhance the experience of reading development content. Some of my favorite code blocks are on sites like Gatsby, Stripe, and Josh W Comeau’s Blog.
Markdown Code Blocks
Even more beautiful to me are code blocks in markdown because you can take this basic syntax —
```js
function hi() {
console.log("hello");
}
```— and transform it into this beautiful and feature rich code block for your readers!
function hi() {
console.log("hello");
}This is what makes Markdown so powerful! Writing minimal syntax, with intent, resulting in beautiful experiences.
My Setup
I’m gunna show you how I was able to make these custom code blocks on my blog using Gatsby, MDX, and prism-react-renderer.
In this post I’m going to assume you know the basics of React. Things like rendering components, props, state, hooks.
Though I’m using this specific stack, the pieces can be adapted to use various combonations of technologies such as —
- NextJS
- Tailwind CSS
- remark
- Styled-components
- highlight.js