The post is also available in: Swedish
If we want to present code on a webpage then we have some different tools that can help us by coloring the code according to the syntax. The options we have is basically one of two things, server or client-based. I have chosen to use a client based script because I don’t want to “pollute” the outputted html code.
Prettify is a javascript which is released under the license Apache License 2.0. The code can be downloaded at Google code. I’ve chosen to use this script over other equivalents because I feel it’s more flexible, stable and faster.
Usage
Download and link both CSS and javascript files in your html document.
<link type="text/css" rel="stylesheet" href="prettify.css" /> <script type="text/javascript" src="prettify.js"></script>
Initialize the script by running the function prettyPrint. The function will look for all pre tags marked with the class name “prettyprint” and style them. Do you already have a site with lots of code snippets then it can be a bit much to relabel them with this new class name. My solution was that to simply look for all the tags in the document I wanted to edit using javascript and added the class “prettyprint” to them.
An example of how this might look in jQuery:
$( 'pre' ).addClass( 'prettyprint' );
To get the rows numbered we’ll also need to add the class name “linenums”.
If you don’t want the line count to start from one, but instead from example row number 27, you can add the class mentioned above followed by a colon and the number on the row you want to start counting from.
<pre class="prettyprint linenums:27">
...
</pre>
Specify language
In addition to the regular languages that are supported by Prettify there’s also separate language files you can add. For an exact specification of witch languages that is supported you should see the google code page for Prettify.
Prettify can automatically detect the type of syntaxa which is contained within the pre-tags and color it accordingly. But if you want to specify what language it is on your own you also have this opportunity.
The first option to do so is to add another class name on the pre-tag.
<pre class="prettyprint lang-css">
...
</pre>
The second option is to add a code tag that specifies the language in a similar way.
<pre class="prettyprint">
<code class="language-css">
...
</code>
</pre>
The latter alternative is inspired by W3C and is also the option I would recommend.
Tip
I would also like to recommend you to mark your pre-tag with class names that indicate how many lines the containing code is of. This can be useful when you later style your prettify snippets.
$( 'pre' )
.addClass( 'prettyprint' )
.each(
function()
{
// Counting line breaks
var ln = $( this ).html().split( "\n" ).length;
if( ln > 1 )
$( this ).addClass( 'linenums' );
if( ln > 999 )
$( this ).addClass( 'four' );
else if( ln > 99 )
$( this ).addClass( 'three' );
else if( ln > 9 )
$( this ).addClass( 'two' );
});
prettyPrint();