Showing posts with label colored source code. Show all posts
Showing posts with label colored source code. Show all posts

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.
    }
}