The Highlight of my WordPress Week

I started this thing of using a pun as a blog title and now I'm in all kinds of trouble thinking them up for syntax highlighting! Please forgive this one, but I still think it's better than some click bait title like '5 of the Best Syntax Highlighting Solutions for WordPress in 2017'. Nobody will ever read this, but I'll have the moral high ground.

As I mentioned yesterday there's two main options for syntax highlighting text in WordPress. The first is using GeSHi, a popular PHP library for generating syntax highlighted HTML which was originally developed for use with phpBB.

The second is to use one of the JavaScript based libraries, and there's a couple of great options that are widely used here too.

GeSHi

As it's PHP based GeSHi is a natural fit with WordPress. It's also great if you want to have your server do the hard work of generating the syntax highlighted HTML code. GeSHi has a long history and so now supports hundreds of languages, which is important if you're planning on using more obscure languages. There's been no update to GeSHi in years, and consequently neither have the WordPress plugins. A few languages are noticeably missing out of the box, like Dockerfile syntax, but it's apparently easy to add languages - maybe I'll try that next!

If you decide to go the GeSHi route than here are three good options to look at:

WP-GeSHi-Highlight

One of the features I like about WP-GeSHi-Highlight is the ability to have CSS styles target different code blocks. I'm not sure how easy that would be to integrate with the Markdown syntax I'm using, but it makes sense to me to be able to use different colour schemes for JavaScript and BASH code for example.

I haven't used it with my current setup, but depending on how it registers its filters on the content of posts it should work fine.

Better WordPress Syntax

Better WordPress Syntax, or BWP Syntax, has a similar feature set to WP-GeSHi-Highlight. I think the additional feature that stands out to me here is to highlight specific lines in the code with a different background. Again, I would need to find a way of integrating that in to the Markdown syntax I'm using, but it's a useful feature.

WP-Syntax

WP-Syntax is what I'm using on this site, and it's main feature for me is its simplicity. As you might have been able to work out, I like the idea of using plugins that are good for one thing. That way you can compose them, and extend them, rather than loading up large quantities of code to supply features that you're not using.

Having said that WP-Syntax really is basic. You can only supply a single CSS file for the styling of highlighted blocks. This file gets placed in your theme directory. It's not got loads of options, so as long as you can bend it to your will it's a great.

Others

There are loads of options here, just search for 'GeSHi wordpress plugin'. Another popular choice is CodeColorer. It's great but uses a different syntax to define the code blocks (either a short code or a single code element), so would take some modification of Parsedown in our setup.

Client - JavaScript

Instead of using a server-side library like GeSHi, you could plump for rendering the highlighting in the browser using JavaScript. There are pros and cons to this. Depending on the amount of code that you are highlighting, it could slow the render of the page down, despite it being faster to get down the wire to the user.

The pros must be winning as a number of high profile sites do their highlighting like this, most notably for me being CSS-Tricks and A List Apart. A couple of good options here are:

PRSIM.js

PRISM is a project from Lea Verou, who has created a number of useful front end code tools like -prefix-free and wrote the well renowned CSS Secrets book.

It's a popular project and using it involves adding some CSS and a JS file. These can be custom built to include the languages you want to support. Getting WordPress to use it is a case of including these files, which you can either do yourself or find a plugin like this one to do it for you and provide a couple more useful options.

Highlight.js

The other highly popular option in this category is Highlight.js. Usage is similar to PRISM and you can also create your own custom build. It has support for some additional languages that makes it appeal to me (especially Clojure as I'm learning that currently). Again you can install it for use yourself or turn to a plugin to help you.

What do I use?

If you've seen my previous posts about using Markdown with WordPress then you'll know that I currently use WP-Syntax and have to tailor my HTML rendered by Parsedown for it to work properly. I also need to do some other mucking about with WordPress filters.

I have thought about changing and I may do so in the future. I'd probably move to a JavsScript based highlighter and I'm leaning towards Highlight.js, purely because of its support for a couple of languages I want, but I think you'd be fine whichever of these two solutions you chose.