How to Use Google Code Prettifier for Quick and Easy Syntax Highlighting

From PHP gurus to HTML wizards, anyone who writes online about programming or markup will at some point need to include a code excerpt in an article or blog post.

It's easy to include preformatted sections of code in an HTML page via the <pre> and <code> elements, but they're a bit plain. Wouldn't it be great if we could have the code syntax-highlighted like in our favourite IDE, without adding a whole load of extra markup? With Google Code Prettifier, we can!

Grab The Files

The first step to achieving beautiful (OK, maybe that's taking it a bit far) syntax highlighting is to download the source code. Once that's done, copy prettify.js to wherever you keep your JavaScript files. The files with names starting “lang-” are extensions for specific languages but the only ones most people are likely to need are lang-css.js and lang-sql.js - pretty much everything else is covered by the main prettify.js. Copy over lang-css.js and lang-sql.js to the same directory as prettify.js.

Next, either copy the CSS rules from prettify.css into your main CSS stylesheet, or copy prettify.css into your CSS directory.

A Little Preparation

Once the files are in place, the next stage is to include the JavaScript and CSS in our pages. This is straightforward enough, just include the files with <script> or <link> elements like usual.

The next stage is to tell the JavaScript to run when the page is loaded. The original README file tells you to use <body onload="prettyPrint()"> but in these times of unobtrusive JavaScript, that won't do. We're going to be a bit savvier and use an event handler to run the prettyPrint() function when the DOM is loaded.

Setting up the event handler with your JS framework of choice should be straightforward enough, here are a few examples of how you might do it:

// Prototype
document.observe("dom:loaded", prettyPrint());

// jQuery
$(document).ready(function() {
    prettyPrint();
});

// MooTools
window.addEvent('domready', function() {
    prettyPrint();
});

Making the Magic Happen

See, told you this was easy! Now we just need to let the Prettifier know which elements to work on. This is achieved by adding a class name of “prettyprint” to the <pre> or <code> elements in question. Easy enough, and if you have a lot of old pages that you don't want to go back and modify, you can always write a few lines of JavaScript to insert the class just before you run the prettyPrint() function.

A Few Tweaks

You should now be seeing your prettified code - looks lovely, doesn't it? Depending on the background colour of your page, you may find that giving the prettyprinted elements a white background will help the colours to stand out a bit better. If you decide you don't like the default colours, you can easily change them in the CSS.

If you're posting long code segments, or want to be able to easily refer back to certain lines, you can turn on line numbering by adding a class name of ‘linenums” to your prettyprinted <pre> elements. You can customize where the numbering starts by adding a colon followed by the starting number e.g. “linenums:14”.

Wrapping Up

Thats it - we now have syntax-highlighted code on our pages, with minimal extra HTML and without breaking the copy-paste functionality of the browser for people who want to copy out code segments. Now, go forth and let your code shine!

Tags: CSS Design HTML JavaScript Tutorial Usability

Found this post useful or interesting? Please share it with your friends!

Feedback

Sorry, feedback is now closed on this post, but please feel free to get in touch if you would like to talk about it!

  1. Kent on

    Thanks for this tutorial.  I was looking for a solution to this just last week.  I tried a few php libraries, and I tried adding span tags to different elements, but I didn’t 100% like how the php library treated my code and creating span tags is both tedious and makes for ugly source code.  I tried the javascript library in your tutorial and it works perfect.  Awesome.

  2. Kris on

    Hey Kent - glad you found it useful!

    My motives were the same as yours in not wanting to add too much extraneous markup to the page itself. Also some of the other solutions I found broke copy/paste so I was keen to avoid that too. Google Code Prettifier was just the right fit :)

  3. Pingback: Delicious Bookmarks for August 5th from 13:13 to 18:42 « Lâmôlabs on 6th August 2010 at 12:03am

    How to Use Google Code Prettifier for Quick and Easy Syntax Highlighting – Simian Studios – Bespoke Web Design & Development

Or find posts by tag →

Friends & Influences

  1. Aching Brain
  2. Andy Budd
  3. Anthony Killeen
  4. Ben Everard
  5. Cameron Moll
  6. Dan Cederholm
  7. Dan Mall
  8. Dave Shea
  9. Elliot Jay Stocks
  10. Jamie Knight
  11. Jamie Rumbelow
  12. Jason Santa Maria
  13. Jeff Croft
  14. Jeffrey Zeldman
  15. Jeremy Keith
  16. Jon Hicks
  17. Khoi Vinh
  18. Mark Boulton
  19. Matt Croucher
  20. Nocturnal Monkey
  21. Sarah Parmenter
  22. Shaun Inman
  23. Simon Collison
  24. Tim Van Damme
  25. Toby Howarth