Adding Syntax Highlighting

Note: I no longer use Prism.js on this website, as it is no longer WordPress. However, this is a post that others may find useful so I decided to keep it.

I’ve been unhappy with the code blocks on this site for a while now. I really wanted to add syntax highlighting, but I didn’t want to add another plugin.

I ended up going with PrismJS for code blocks by natively baking it into my theme, rather than adding a plugin to WordPress. PrismJS obviously uses JavaScript for syntax highlighting, so I wanted to ensure that everything still works and looks right for people who have JS disabled.

Here’s how a syntax highlighted code block now looks like on this site:

body {
    background: #fff;
    color: #333;
    max-width: 40rem;
}

Looks pretty good, right? If you hover over the code block it also tells you what language the code block is, as well as an option to copy to contents of the block.

All pretty nifty, but what does it look like when JS is disabled? Well, here it is:

body {
    background: #fff;
    color: #333;
    max-width: 40rem;
}

Still looks pretty good, right? In fact, it’s almost exactly the same. The last thing I wanted is to have a blank space for people who have JS disabled. I’m a firm believer that a site should be accessible to as many people as possible.

I’ve also made a small tweak on my theme’s CSS that makes inline-code look a similar to the new code block.

I’m really happy with how my theme is evolving on this site. Hopefully this makes things easier for you as a reader too. When I get a chance, I will write a guide on how I added syntax highlighting support to my theme.


📰 Cool people get newsletters!

Do you want all your friends to look up to you and think “I wanna be like them!” If so, you need my newsletter! To find out more click here.

Warning: Reading my newsletter will not make you any cooler and is likely to significantly reduce your intelligence. May contain nuts 🥜.


💬 Looking for comments?

I don't have comments on this site as they're difficult to manage and take up too much time. I'd rather concentrate on producing content than managing comments.

Instead of leaving a comment, you could 📝 sign my guestbook or ✉️ contact me instead.