
When you frequently post code in your blog posts, it’s nice to have that code syntax highlighted for readability. On WordPress, there was this plugin to do just that, using the JavaScript library highlight.js. However, that plugin is no longer maintained, and has a security issue. So it’s time to get rid of that.
Instead of looking for yet another highlighter plugin, I thought this would be easy to integrate without a new plugin. It’s just about including a JavaScript library on your site, really.
Here’s how I got it working.
1. The easiest no-fuss, non-optimized way.
In a way, it’s enough to include the highlight.js script and call the initialization code.
So if you basically drop the code below in a WordPress Custom HTML widget, you are set. It’s best to put this code in the footer block of your site, to avoid it from slowing down your page load.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
This will get the code from CDNJS, and run the initialization.
Simple, but not optimized. It’s loading the script & CSS file from an external domain, which is slower than loading it from your own (HTTPS handshakes etc.). Privacy related, you might also not want to inform Cloudflare (CDNJS is theirs) about who visits your site either. Or any other external CDN you target for that matter.
You might also be missing some languages that are not in the default set. You can include the script for let’s say Go or Rust by adding another script tag, but the more of those scripts tags you add, the slower your page is going to become as more resources need to be loaded.
So let’s try the optimized approach, with a bit more work.
2. The more fuss and optimized way
First, head over to https://highlightjs.org/download/ and create a custom pack for your site by including all the languages you think you’ll need. By hosting those files on your own site, you’re taking away the external domain handshaking, making it load faster, and you avoid tracking. You’ll also have a single JS & CSS file to load, instead of multiple for the different languages you want, which is another speed increase.
If you have FTP access to your site, you can upload these anywhere you like. If you only have access to your WordPress instance, you can upload the files in your Media Library, and get the direct links from there. Use the Document format for that.
Once you have the links, you can again add them to your site’s footer with the Custom HTML widget. Set the path for the files to wherever they are hosted on your site.
Another way to add the includes in your site’s footer, is by using the Head & Footer code plugin. If you don’t have this installed, it’s probably not worth the fuss, but I’m already using this for other stuff, so I might as well use it here.
This puts the code lower in the HTML page than you can get it with an HTML widget.
3. Spend hours finding the right color scheme for your site
Yeah. You know how it goes. Once you start trying out all the color themes, you’re off for hours. :)