Blog

Highlighting example code on your website

5th July, 2014 Styling,

If you’re looking to style example code on your website so it looks like it’s in a HTML editor with line numbers, Google Code Prettify can help you do exactly that. There are two ways you can get this up and running on your website, either loading the script and CSS for prettify direct, or manually by downloading the scripts and styles.

The quickest way to get this working is one link direct to the Google Code Prettify script, all you need to do is add this line of code in between your head tag.

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

Now to set the style, there are some great choices in the Prettify Theme Gallery, or if you want to style it yourself you can. If you decide to use a theme from the gallery you just need to add to your script link to load the CSS style. For example if you wanted to use the desert theme by techto, you’d add  ?lang=css&skin=desert to the URL.

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

To add the new style to your code snippets you just need to wrap them up using the pre tag and the class ‘prettyprint‘.

<pre class="prettyprint">
     Your code goes here.
<pre>

You might be thinking where are my line numbers?  To do this you need to add the linenums class to to your pre tag, you will also need need to use the code tag to wrap your code as follows.

<pre class="prettyprint linenums">;
     <code>
          Your code goes here.
     </code>
</pre>

There you go, it’s ready to go! However if it’s still not working see below for some of the issues we encounted.

Code Prettify issues

1. Your line numbers only show every 5 lines, and not every line.

If you have used a Prettify Theme you will have to add the code below to your own stylesheet to fix this.

li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
     list-style-type: decimal !important;
}

2. Your PHP or Script example code won’t show.

The answer to this is a simple one, you can’t actually add code directly to your page as it will behave like code should, instead of using the < character you need to use &lt; and for the > character you use the &gt; entity.

Making life easier

If you plan to use Code Prettify on all the pages of your website, you can use the code below to add the classes’ prettyprint and linenums to all your pre tags automatically. You won’t even need to add the link to Google Code Prettify in the head tag.

<script>
$(document).ready(function() {	
     var prettyprint = false;
     $("pre code").parent().each(function() {
          $(this).addClass('prettyprint linenums');
	  prettyprint = true;
     });	
     if ( prettyprint ) {
          $.getScript("https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=desert", function() { prettyPrint() });
     }	
});
</script>

Add Google Code Prettify Manually

You can download the scripts and styles and serve them yourself. Make sure to include both the script and a stylesheet.

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

You will also need to call the prettify function when the page loads by adding this code to your body tag.

<body onload="prettyPrint()">

Features of Google Code Prettify

  • Works on HTML pages
  • Works even if code contains embedded links, line numbers, etc.
  • Simple API : include some JS&CSS and add an onload handler.
  • Lightweights : small download and does not block page from loading while running.
  • Customizable styles via CSS.
  • Supports all C-like, Bash-like, and XML-like languages. No need to specify the language
  • Extensible language handlers for other languages. You can specify the language.
  • Widely used with good cross-browser support.

If you would like to read up on other classes and features not mentioned in this tutorial you can get more information here.