I use the excellent Google Syntax Highlighter by Alex Gorbatchev to highlight my code snippets here (called GSH from here on out). A couple of WordPress plugins exist that integrate it into WordPress. I personally use SyntaxHighlight by Eric Range, but you can find Plenty of others on WordPress’s site¹. Several languages are supported right out of the box, but I came across situations where I wanted to display code with very little to no formatting (shell scripts, config files…) Turns out, adding languages to GSH isn’t very difficult. This guide should work with any plugin based on Alex Gorbatchev’s code. The only difference between plugins is how they tie the GSH’s javascript files into WordPress. My examples will use Eric Range’s plugin.

A very simple shell script language definition

I want to highlight some shell script files. I don’t need anything too complicated. I just need to have # highlight as a comment to the end of the line.

Add a language Brush

We start by opening up one of the existing language “Brush” js files to use as a reference. These are called shBrush[language].js and are located in Scripts/. Let’s look at the definition for Ruby because it isn’t too complicated.

Most of the work lies in changing and this.CssClass and this.regexList. this.CssClass will end up being the class of the <ol> element in the output html. Each element of this.regexList defines a RegExp object and a corresponding CSS class. If a segment of code matches the RegExp it will be put in a <span> with the class you specify. The actual highlighting portion is all done through CSS, as it should be.

this.GetKeywords() will take a space delimited string and convert it into an appropriate RegExp. You can see how it is used above.

dp.sh.Brushes.Ruby.Aliases is an array of strings that define what code blocks will invoke this highlighting rule. If I specify that my code is ‘ruby’ or ‘rails’ GSH will highlight it using these rules.

Luckily, my requirements are so terse that we’re left with very little code.

I save this as Scripts/shBrushShell.js

Edit the CSS

All the CSS is stored in one file Scripts/SyntaxHighlighter.css. Following the conventions in the rest of the CSS styles we add our rules for .dp-shell and .dp-shell .comment

Edit the plugin source

This will vary plugin to plugin. For Eric Range’s plugin there is one array that I have to change in syntax.php

I also had to enable Shell language in the WordPress->Options->Syntax menu.

Test

A Brush with no highlighting

I created a Plain language that won’t do any highlighting. I’ll use this when I don’t have an applicable Brush and I don’t want to bother writing a new one.

Script/shBrushPlain.js

Style/SyntaxHighlighter.css

syntax.php

Proof that it works

Notes:

1. Unfortunately, Eric Range’s plugin shares its name with a plugin on WordPress’s site. Like I said, any plugin based on GSH should be rather easy to modify. [↩]