On February 20, 2012 In User interface with , , , tags

Syntax Highlighting with Google Prettify

Lets make our old black and white code look pretty with Google prettify.

Styling code view with Google Prettify

It just takes 3 simple step to make your code pretty. Let’s start by downloading minified source of Google prettify.

Extract twice using 7-zip because it’s a .tar.bz2 file. We will find few js files and one css file. In our case, we will be moving all. js files in js folder and .css in css folder. Don’t leave lang-[language].js files somewhere else, keep it with prettify.js

Let’s begin by linking prettify.css and prettify.js

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

Once done add onload event to the body. So, that prettify.js can start the work. This would like

<body onload="prettyPrint()">

Now, the final step we would be adding a class prettyprint to pre or code

<pre class="prettyprint">
- or -
<code class=”prettyprint”>

That’s it we are done, trust we don’t need a demo. Because we are already watching it

One response to “Syntax Highlighting with Google Prettify”

  1. Prodyot says:

    Beautiful tutorial.