Google-code-prettify Examples

Xah Lee, 2009-06-20

This page gives some examples using Google-code-prettify technology, and evaluates its quality.

Google-code-prettify (GCP) is a javascript library that syntax color computer lang source code in html. It does the job on the fly. Project page at: http://code.google.com/p/google-code-prettify/.

Basic Use

It is very easy to use. All you have to do is to download the javascript files. Then, in your web page, add these lines:

<link rel="stylesheet" type="text/css" href="gcp/prettify.css">
<script type="text/javascript" src="gcp/prettify.js"></script>
<body onload="prettyPrint()">

Then, in places you want your source code to be colored, wrap it with a “pre” tag like this:

<pre class="prettyprint">
x = 1+1;
# something something
</pre>

Advantages:

Your lang source code is still readable in raw html. This means, if you need to edit it or update it, it can be easily done.
Easy to use. You don't need to run some script to generate span markup everytime you have a source code snippet you want to publish.
Easy to install. Works in all major browsers.
Support all major langs (e.g. any lang with C-like syntax). Also support some wiki syntax, auto link urls.

Disadvantages:

Requires js turned on. If js is not turned on in browser, readers won't see colored syntax. (about 5% or less browsers have js turned off)
The coloring is sometimes incorrect.
If your lang has complex syntax, such as Perl, then GCP doesn't handle it well.
Chars such as “<”, “>”, “&” still needs to be html encoded as “<”, “>”, “&”. If you don't, browsers may not show parts of the text.

Examples

Here are some examples with different languages. For comparison, each example has a version using html span, done by htmlize elisp package with emacs.

Java:

Python:

Perl:

Emacs Lisp:

Conclusion

Google-code-prettify is suitable for small number of lines or for non-critical writing such as on wiki or blogs. It is probably not the right tool for any sizable need for publishing source code, such as online documentation of a computer language or a book length tutorial.

For code over 2 hundred lines, it also takes a second to load. In comparison, bulky html with span wraps that has more coloring and correct syntax is still instaneous.

2009-07-02

Mike Samuel (author of Google-Code-Prettify) offers this advice on avoiding the need to first change “< > &” chars.

(1) You can try using XHTML in which case you could put code in <![CDATA[ ]]> sections. This will work unless your code contains the string "]]>"
(2) In regular HTML, some tags, like <xmp> have content that is not escaped. You can put your code in an <xmp> block instead of a <pre> block, but in that case your code can't contain the string "</xmp>" case insensitively.

Related essays:

Using Emacs To Syntax Color Source Code In HTML

∑ Back to DHTML Tutorial.

2009-06