Hi! I'm currently reworking my site, so although this content is still online things may change or look odd. Please get in touch to find out how I can help you!
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!
Posted on Wednesday, 28th July 2010.
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!
-
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.
-
Kris
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 :)
-
Pingback: Delicious Bookmarks for August 5th from 13:13 to 18:42 « Lâmôlabs
How to Use Google Code Prettifier for Quick and Easy Syntax Highlighting – Simian Studios – Bespoke Web Design & Development