5 November 2009
Client Side Code Highlighting Made Easy
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.
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.
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 50 percent on your subscription.
Krues8dr
# November 5, 2009 - 4:42 pm
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).
Keir Whitaker
# November 5, 2009 - 4:49 pm
Thanks for the comment. I am not sure I understand. If you are viewing the source of this page WordPress will have worked it’s magic and turned some characters into their HTML entities. If you mean something else please explain further as I am keen to understand.
Víctor
# November 9, 2009 - 12:14 pm
Thanks. That’s interesting.
Bart Zonneveld
# November 5, 2009 - 4:43 pm
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…
Keir Whitaker
# November 5, 2009 - 4:49 pm
That’s interesting. I’ll bear that in mind.
Goulven
# November 5, 2009 - 5:50 pm
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).
UnderpantsGnome
# November 5, 2009 - 6:29 pm
If you use the Copy to clipboard button you don’t get the numbers, just the original code.
Andrei
# November 5, 2009 - 5:57 pm
I’d recommend this code highlighter: http://softwaremaniacs.org/soft/highlight/en/
Carson McDonald
# November 5, 2009 - 6:36 pm
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.
kas187
# November 6, 2009 - 11:18 am
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/
Piotr
# November 6, 2009 - 4:36 pm
There’s a better way with GeSHi – http://qbnz.com/highlighter/ and it’s free
Vojtech Vondra
# November 7, 2009 - 9:36 am
Unfortunately, GeSHi isn’t client side based.
Keir Whitaker
# November 7, 2009 - 11:09 pm
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/
Jakub Vrána
# November 9, 2009 - 10:35 am
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.
chel adams
# November 10, 2009 - 3:56 am
job description, job descriptions
Programming Tutorials
# December 3, 2009 - 10:15 pm
I was looking for this type of tool for my site. Thanks a lot.