Title photo
frugal technology, simple living and guerrilla large-appliance repair

Regular blog here, 'microblog' there

Many of my traditional blog post live on this site, but a great majority of my social-style posts can be found on my much-busier microbloging site at updates.passthejoe.net. It's busier because my BlogPoster "microblogging" script generates short, Twitter-style posts from the Linux or Windows (or anywhere you can run Ruby with too many Gems) command line, uploads them to the web server and send them out on my Twitter and Mastodon feeds.

I used to post to this blog via scripts and Unix/Linux utilities (curl and Unison) that helped me mirror the files locally and on the server. Since this site recently moved hosts, none of that is set up. I'm just using SFTP and SSH to write posts and manage the site.

Disqus comments are not live just yet because I'm not sure about what I'm going to do for the domain on this site. I'll probably restore the old domain at first just to have some continuity, but for now I like using the "free" domain from this site's new host, NearlyFreeSpeech.net.

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|
 File.delete(file)
end