Add Client-side Code Highlighting to Your Blog
There are a few options for client-side code highlighting. Highlight.js is one of the most popular, and it’s super easy to integrate into your site. Let’s do it!
Compared to Server Side
I usually default to server-side code highlighting. It puts the complexity of code highlighting in the build phase and keeps the runtime simple. The most popular server-side option is pygments. I have used this for many years. Unfortunately, in my latest conversion to hugo, I realized that the support for server-side highlighting was not good. Not only was it slow, I found out over time that many simple things weren’t even getting correctly interpreted as code blocks (eg, anything json or html, which should be common types, right?). So I switched to Highlight.js on the client side. I was pleasantly surprised at its simplicity. Besides the couple new network requests, it’s really simple for the consumer of this library.
Include the Script
First, include the script near the bottom of the page that has code blocks on it:
Next, call the Hightlight.js initialize function:
When this function runs, it’ll look for the
pre > code blocks, like this:
<pre> <code class="language-js"> const nacho = anaconda => squeeze(anaconda) console.log(nacho()) </code> </pre>
And turn them into:
Include the Stylesheet
Now that the code snippet has been parsed and class names added to elements representing the different parts of the code syntax, we want to color it. There are several options for styles available on the hightlight.js home page (though the ui is weird – just click the “style” link under the code sample there to cycle through options).
I like one called
atom-one-dark, so I will next include that stylesheet in the
<head /> of my page that contains code blocks:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/atom-one-dark.min.css" type="text/css" media="all" />
That’s it. You’re now set. Just load your page in the browser, and it should apply the highlighting. That was easy, right? Do you prefer client-side or server-side code highlighting? Do you use Highlight.js or something else? Any favorite highlighting themes?