Add Google Code Prettify to your website, to allow syntax highlighting of source code snippets in any web page. Google Code prettify was developed to work on any HTML generated page and works even if code contains embedded links and line numbers. Furthermore, the JavaScript module is only 14 KB minified and the style can be customized through CSS. You can specify the language through extensible language handlers. Lastly, it had good cross browser support.I use Google Code Prettify on this website and my other websites. Google also uses it on Google Code and StackOverFlow also uses it.

Add to Your Website

Adding Google Code Prettify is as easy as three (3) steps:

CSS

Create and save a file called prettify.css. Add the following CSS to the file, located here or use an example from the Google project itself.

Add the stylesheet to your website like this:

<link rel="stylesheet" href="prettify.css" type="text/css" media="screen" />

JavaScript

You can download and self the JavaScript module or use the hosted version provided by Google. Add one of the following to your website:

Self-Hosted:

<script src="prettify.js"></script>

Hosted:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Now that you have done this, you can then run the prettyPrint function once your page has finished loading. One way to do this is via the onload handler thus:

<body onload="prettyPrint()">

This is okay, but you may not want Google Code Prettify to run on every page, so you can create a JavaScript file with the following code or inline the JavaScript with the following code; this is how I do it:

!function($){$(function(){window.prettyPrint && prettyPrint()})}(window.jQuery)

Auto-Loader

You can also configure the runner through arguments. If you are using the hosted Google Code Prettify file, it’ll look something like this:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst"></script>

As you can see in the above example, the arguments added were: ?lang=css&skin=sunburst

Here is a table of available arguments:

Argument Default Value Description
autoload=(true | false) true run automatically on page load
lang=… none Loads the language handler for the given language which is usually the file extension for source files for that language. If specified multiple times (?lang=css&lang=ml) then all are loaded.
skin=… none If specified multiple times, the first one to successfully load is used.
callback=js_ident window.exports["js_ident"] will be called when prettyprinting finishes. If specified multiple times, all are called.

Using Google Code Prettify

When you want to use Google Code Prettify, simply use the following HTML:

<pre class="prettyprint"> </pre>

If you want to add line numbers, use the following HTML:

<pre class="prettyprint linenums"> </pre>