LearnClient Side Code Highlighting Made Easy

Treehouse
writes on November 5, 2009

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.

17 Responses to “Client Side Code Highlighting Made Easy”

  1. I was looking for this type of tool for my site. Thanks a lot.

  2. job description, job descriptions

  3. I am the author of JUSH. It doesn’t support so many languages but the support for LAMP stack is much more powerful. JUSH is able to detect MySQL queries used in PHP functions, JavaScript code in HTML attributes and so on and highlight this context.

  4. Keir Whitaker on November 7, 2009 at 11:09 pm said:

    Also came across Gist’s from GitHub today. Nice and easy and comes complete with line numbering and the ability to view the code as plain text which means it’s easy to copy.

    http://gist.github.com/

  5. There’s a better way with GeSHi – http://qbnz.com/highlighter/ and it’s free

  6. I personally prefer Lighter.js which uses the awesome mootools library. It’s lightweight and can be used for various languages.

    http://pradador.com/code/lighterjs/

  7. There is also Google’s code prettify http://code.google.com/p/google-code-prettify/ It doesn’t support as many languages but it will prettify code without specifying what language it is written in and that can come in handy sometimes.

  8. It makes the code much more readable indeed, but the numbers are included when you select the text, which I find a little annoying (but only a little because I can use the “View source” link).

  9. Bart Zonneveld on November 5, 2009 at 4:43 pm said:

    Have used it as well, does what it says on the tin :).
    Only downside is that performance is awful with multiple (>5) code blocks on one page. Even in Safari on a Mac Pro…

  10. Not to be pedantic, but watch out with colons in class names as above there – it doesn’t actually associate the elements. To reference the element in question, you actually have two classes – pre.brush: and pre.php, which is a little weird (especially since you need the escape character on the colon).

  11. Not to be pedantic, but watch out with colons in class names as above there – it doesn’t actually associate the elements. To reference the element in question, you actually have two classes – pre.brush: and pre.php, which is a little weird (especially since you need the escape character on the colon).

Leave a Reply

You must be logged in to post a comment.

Want to learn more about Javascript?

Learn how to use JavaScript to add interactivity to websites.

Learn more