Locomotivation

Syntax Highlighting Blog Posts

After setting up this blog on the amazing new Expression Engine 1.6, we needed a way to share code snippets on blog posts. I found a number of utilities that will preformat your code, injecting markup around keywords that you can then style to taste. However, most of these solutions were language specific and cumbersome. One of the best tools I found was Pastie. With its built-in API, it would have been a nice fit had I been running a Rails-based CMS.

Most of the tools I found were Wordpress plugins which doesn’t help out an EE fan like me. I did find a great EE plugin for PHP code, but we tend to sling much more Ruby (and Rails), SQL, HTML, Javascript, and CSS on this blog.

Perhaps we were asking too much but we simply wanted to format our code within an entry with:

1. No special markup required
2. Multi programming language support (including the ones I haven’t learned yet)
3. CSS based styling

The solution

I remember liking how Javascript Fu Master Dan Webb formatted code within posts on his blog and was pleased to find a link to his CodeHighlighter project on his site. CodeHighlighter is a 100% client-side solution, using Javascript to perform configurable Regular Expression matches to inject CSS classes around keywords, constants, and other language constructs. Supported languages include Ruby, HTML, CSS, and Javascript, however you can add support for your favorite language in literally a few minutes. CodeHighlighter doesn’t offer SQL highlighting out of the box, so that’s exactly what we did.

Step one: set up the scripts Simply copy the CodeHighlighter.js and other language specific scripts to your server and add the script tags to your page:

Step two: insert your code block Next, add your code block to your post:

<pre><code class="html">
  your code here
</code></pre>

Note the CSS class on the code element. This determines the language formatting that CodeHighlighter should apply to your code.

Step three: set up your styles The last step to syntax highlighting bliss is to add language specific CSS rules to your stylesheet:

.javascript .comment, .ruby .comment, .sql .comment { color : #9c6; font-style: italic; }

.javascript .string, .ruby .string, .sql .string { color : #9c6; }

.javascript .keywords, .ruby .keywords, .sql .keywords, sql-keyword { color : #679ef1; }

.javascript .global { color : blue; }

.javascript .brackets, .ruby .brackets { color : red; }

.css .comment { color : gray; }

.css .properties { color : navy; }

.css .selectors { color : maroon; font-weight : bold; }

.css .units { color :red; }

.css .urls { color :green; }

…

Adding support for SQL (well actually MySql)

To support SQL, I simply cloned the Javascript rules (javascript.js) as sql.js and edited the Regular Expression rules as necessary.

CodeHighlighter.addStyle(“sql”,{ comment : { exp  : /(—[^n](n|$))|(/[^]*+([^/][^]*+)/)/ }, string : { exp  : /’[^’]’|”[^”]*”/ }, keywords : { exp  : /b(ADD|ALL|ALTER|ANALYZE|AND|AS|ASC|ASENSITIVE|BEFORE|)b/ }, global : { exp  : /b(NULL)b/ } });

All I had to do was copy this file to the server and Jim’s first MySql post just got a bit more purty.

Drawbacks

While CodeHighlighter is a super easy, unobtrusive way to provide syntax highlighting in a server agnostic way, it’s client-side nature does mean you may see a slight delay before your code becomes formatted as the page loads before the script initiates. Also, as you can see with my SQL example, the rules files may get quite large, 8k in our case. If any RegEx gurus are reading, let me know if you can match a set of words in upper, lower, and mixed case for case insensitive languages like SQL. That would cut the sql.js rules file in half!

  •