Jun 17, 2011

Add Syntax Highlighter To Blogger

We can use a syntax highlighter to display source code syntax in different colours. It will create a user friendly environment to read the source code.
I'm going to use google-code-prettify to do this task.

First thing you need to add a java script and a css to your blog. It should be placed after the <head> tag. To do this you must go to settings -> design -> edit html.
Press "Ctrl+f" and type " <head" , it will help to find the head tag. Then add the Javascripts and css like this.

<head>
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/> 
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>

Then you need to modify the "<body>" tag. It should be like this.

<body onload="prettyPrint()" ... >

Then you can write your code within <pre$gt;</pre$gt; or <code$gt; </code$gt;. But to add the colours you need to add the class as,

<pre class="prittyprint">
   <!-- Your code comes here. -->
</pre>

Note: - First use "Compose" to add the coding then go to "Edit HTML" to add the pre tag with class. There is an effect between <> and &lt;&gt; .

This is a sample java program.

class HelloWorldApp {
    public static void main(String[] args) {
        System.out.println("Hello World!"); // Display the string.
    }
}

No comments:

Post a Comment

Your comments are always welcome ...