HowTo: WordPress Code Syntax Highlighting

For months and months and months I’ve been looking for a good code syntax highlighter for WordPress. My requirements are simple: 1, the highlighter mustn’t add lots and lots of div and table tags around my code and, 2, it should add a TinyMCE pre tag button to the visual editor.

If I had the knowledge and the time to write such a plugin I would. Thankfully I don’t need to do that anymore because I’ve found nearly 2 halves of the solution in two different plugins.

The first plugin is TinyMCE Preformatted. It fulfills requirement number two by putting a button into the visual editor for adding preformatted text to posts. It works flawlessly at saving the time I’d usually spend going through my posts to manually add in the <pre> tags.

The second plugin is Pretty GC Syntax Highlighter which adds the prettify.js code used by the Google Code Source Browser. It’s so unlike the other highlighters I’ve tried in the past. This one doesn’t surround code in hundreds and thousands of divs and tables; and best of all it gives my code pretty syntax highlighting which helps break my posts up a little bit. I admit it uses a lot of span tags around the highlighted text but I can live with that because they only show when Javascript is enabled.

I’m telling ya, these two plugins are destined to be lovers married in WordPress blogs around the globe. And I am the matchmaker whose going to help that happen.

Making them Work Together

Installing them together into one blog is great but getting them working together as a team requires a little bit of intervention.

When the TinyMCE <pre> tag button is clicked, a text box springs up for code to be added into it. When the pop-up’s “Insert” button is pressed, TinyMCE Preformatted wraps the code in <pre></pre> tags.

Pretty GC Syntax Highlighting works on <pre> tag classes which need to be added to the tags created by TinyMCE Preformatted. It didn’t take me long to realize that a quick code edit to TinyMCE Preformatted would make it add the required class attributes to the pre tags it generates. A little bit of grepping later and I knew where to make the edit.

Here’s what you need to do to get these two plugins working together:

1. Install and activate TinyMCE Preformatted
2. Install and activate Pretty GC Syntax Highlighter
3. Use an FTP program or your server file manager to browse to (and open for editing) /wp-content/plugins/tinymce-preformatted/mce_plugins/plugins/preformatted/editor_plugin.js
4. Find the line

   var pre = document.createElement('pre');

5. Add these two lines after it

   pre.setAttribute('class', 'dontquote prettyprint');
   pre.setAttribute('className', 'dontquote prettyprint');

6. C’est ça!

The code we find at step 4 creates the pre tag document element inserted by TinyMCE Preformatted. The two lines we add at step 5 create the class attribute or attributes we want to be included in every pre tag created by TinyMCE Preformatted. We use two lines for compatibility with Internet Explorer: the first line works when the WordPress visual editor runs in any browser but IE and the second line works in IE only.

Pretty GC Syntax Highlighter permits 4 mix and match highlighting options as shown in the next table.

The code type is automatically detected, generally, but you can specify a class for a specific code type to ensure it is highlighted properly.

Code quoting is designed to prevent special HTML characters from displaying as HTML character entities such “&lt;” instead of “<“. Although quoting is enabled by default, I think the plugin’s author has got the setting back-to-front; as you will notice if you remove the “dontquote” class from the code edits. [I asked the plugin’s author about this and he says quoting is enabled by default to facilitate search engines to  scan sites. I suppose TinyMCE Preformatted could be edited to convert special characters to HTML entities. I might look into it.]

Line highlighting only works when line numbering is enabled with the linenums class.

Use ‘dontquote’ before prettyprint or it ‘dontquote’ doesn’t work.

Those classes can be combined into the code edits we made. Just add or remove from the bit that currently reads ‘prettyprint dontquote’. For example, if you always want line numbering, use

pre.setAttribute('class', 'dontquote prettyprint linenums');
pre.setAttribute('className', 'dontquote prettyprint linenums');

When you install Pretty GC Syntax Highlighter to enable highlighting you might want to use the Search Regex plugin to convert all currently in post content occurrences of pre tags to pre tags that include the new classes you want them to use. For example, you could search for <pre> and replace with <pre> or whatever class attribute/s you settle on. Search Regex is available here. Remember to back up your database and use the “Replace” button to test the replacements before committing them with “Replace and Save” (if you decide to commit any changes). That’s near enough how I did it at JournalXtra except I needed to convert a few very old <code> tags too.

Examples of it in Action

Using <pre></pre>

<?php

 $file = "somefile.txt";
 $lines = count(file($file));
 echo "There are $lines lines in $file";

?>

Using <pre></pre>

<?php

 $file = "somefile.txt";
 $lines = count(file($file));
 echo "There are $lines lines in $file";

?>

Using <pre class=”dontquote prettyprint linenums”></pre>

<?php

 $file = "somefile.txt";
 $lines = count(file($file));
 echo "There are $lines lines in $file";

?>

Using <pre class=”dontquote prettyprint linenums highlight:3-4″></pre>

<?php

 $file = "somefile.txt";
 $lines = count(file($file));
 echo "There are $lines lines in $file";

?>

Using <pre class=”dontquote prettyprint lang-java”></pre>

BufferedWriter out = null;
try {
 out = new BufferedWriter(new FileWriter(”filename”, true));
 out.write(”aString”);
} catch (IOException e) {
 // error processing code
} finally {
 if (out != null) {
 out.close();
 }
}

A list of languages the Pretty GC Syntax Highlighter recognizes is available here. It covers Bash, C, PHP, Javascript and lots of others.

The home pages for both these plugins are here and here (not telling you which is which).

Incompatibilities

There is an incompatibility between Pretty GC Syntax Highlighter and W3 Total Cache. Users of W3 Total Cache must prevent minification of the prettify.js Javascript or script highlighting won’t show.

You’re Up

Do you have any suggestions for a better highlighter? If you could write your own highlighter, what would it do? What would mark it out from all the others? I would add a pre tag button for the visual editor by default and make it easier to select class attributes from the button as well as add a “select all text” option. Drop us a comment, let us know your ideas.

Sharing is caring!