If you’ve read any of our developer blogs, you’ll have noticed our code examples are really easy to read. This is all thanks to a Google Code project called Prettify.
How to setup & use Code Prettify
Step 1: Load the library
Google Code provide hosted scripts so you don’t even need to download it, all you need is this line in your HTML <head> tag or before </body> tag:
Step 2: Usage
Put code snippets in <pre class="prettyprint">…</pre> or <code class="prettyprint">…</code> and it will automatically be pretty printed.
Prettify looks for <pre> or <code> tags with a class of prettyprint, so you will need to put code snippets in <pre class=”prettyprint”>…</pre> or <code class=”prettyprint”>…</code> and it will automatically be pretty printed. For example:
<code class="prettyprint"> <div id="code-example"> ...your code here... </div> </code>
The output of the code above then looks like this:
<div id="code-example"> ...your code here... </div>
In addition, you can look at the skin gallery and pick styles that suit you.
You need only add ?skin=<css_name> after js file to using. The example of use skin named “desert“:
Prettify is an amazing library which supports a lot of languages and I thank the coders for what they have built for us all to use. And that’s about it. There are some more instructions in the Wiki if you wanted to play around.