Title photo
frugal technology, simple living and guerrilla large-appliance repair
Wed, 29 Mar 2017

Using highlight.js for code syntax highlighting on your web site

I first learned about highlight.js while trying out the Go-based Hugo blogging system, where it is a popular choice for adding syntax highlighting to blocks of code displayed on web pages.

Another solution is Pygments, but I didn't want to wade into Python, and a pure JavaScript solution like highlight.js seemed easier all around.

I had already used highlight.js successfully in a couple of Hugo themes, one in which I did the installation myself and another that had it built-in.

So it was only a small leap to do the same on this Ode site.

The instructions are clear (and easy), and the highlight.js developers allow you to create a custom download via check-boxes to include only the languages and markup you want to use on your site. That same page has info on using two separate CDNs (content delivery networks) to deploy highlight.js on your web site, but I opted to create my custom bundle and host it on this site as part of my main Ode theme.

Once you have the Javascript and CSS on your site and are calling it into your web pages, everything between <pre><code> and </code></pre> will benefit from highlight.js' syntax highlighting.

And as you can see, it works.

The only time this kind of syntax highlighting gets problematic is when displaying HTML, where you need to replace < with &lt;, > with &gt; and so on.

Here's a small bit of Ruby so you can see what the syntax highlighting looks like without leaving this post:

Dir.glob("X16*") do |file|