Article 17 Tweet

Client Side Code Highlighting Made Easy

By Keir Whitaker @keirwhitaker

05 November 2009 | Category: Code, JavaScript

I have recently been working on a little out of hours PHP project called "Dummy". The code is almost complete, apart from the obligatory prettifying of indents and comments, which means it's time to turn my attention to the online documentation.

As part of the "How to Use" page I need to show small PHP code examples. I also want them to look very readable and be easy to copy and paste. Hand cranking each code snippet using <span>'s, spaces and CSS clearly isn't the way to go, there has to be an easy way.

Server Side Options

Having used Pygments (a Python syntax highlighter) I had a quick look for PHP server side solutions and found two native PHP functions that could work.

1. highlight_string();
2. highlight_file();

Both produce HTML representations of the PHP code passed to them. However if you need to display JavaScript, HTML or CSS the output will be plain black text, albeit spaced and indented in the way that it was passed to the function. You will also need to deal with escaping certain characters in certain situations and a distinct separation between your HTML template and your code examples.

Client Side Options

My preferred approach would be to include the code examples in the HTML templates and use CSS to make them readable. After a quick Google search I came across SyntaxHighlighter by Alex Gorbatchev. It’s a JavaScript and CSS solution thats’s fully featured, easy to implement and degrades nicely.

Here’s an example of a PHP code snippet using SyntaxHighlighter

It works by including a few JavaScript and CSS files in your HTML template. You can customise the CSS or use one of the seven themes provided.

In order to apply highlighting to a section of HTML it’s recommended to wrap your example in <pre> tags to preserve the formatting. The final stage is to apply a pre-defined relevant CSS class to the <pre> tag.

For example if we wanted our example to be highlighted as PHP we would add class=”brush: php;” to the <pre> tag. To turn it into a JavaScript example we would add class=”brush: jscript;”.

I have set up an example page which shows HTML, CSS, JavaScript, PHP and XML highlighting in action. View the source to see how easy it is to implement.

There’s support for a huge list of languages including:

• ActionScript3
• Bash/shell
• C#
• C++
• CSS
• Delphi
• Diff
• Groovy
• JavaScript
• Java
• JavaFX
• Perl
• PHP
• Plain Text
• PowerShell
• Python
• Ruby
• Scala
• SQL
• Visual Basic
• XML

SyntaxHighlighter also provides a nice pop up tool-tip (look at the right hand side of a code example when hovering over it) enabling you to view the code in a blank page, copy it to the clipboard or print it.

There are undoubtedly other solutions out there, if you have a preferred one that works for you please link it up in the comments.

Other Posts You Might Find Interesting

• Sorry - No Related Posts Found