Highlighting Source Code in HTML

Posted July 5, 2007 * Comments(0)

I have just finished with configuring the code prettifier on one of my site. It was so easy to implement and took hardly 5 minutes to complete the configuration.

Code Prettifier supports many language syntaxes, like Java, C, C++, PHP, HTML, Bash Scripts etc.

Here are the steps to setup Code Prettifier on your website running wordpress blog.

  1. Download code prettifier distribution.
  2. Upload the script and stylesheets in your theme folder (you will need to adjust the paths in the script and link tag) 
    <link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
  3. Add onload="prettyPrint();" to your document’s body tag.
  4. Put your code snippet in following tags and it will highlight the code automatically. 
    <pre class="prettyprint">...</pre>
or
<code class="prettyprint">...</code>

Thats all you have to put in your theme to get this lovely highlighted source code features in your blog.