Thursday, November 19, 2009

Excellent Code Display Tool for Technical Bloggers.

In my previous post, my code are displayed in ugly format. So that user will not read that post. I was really searching on net to find a Javascript which may help  me in displaying my code cleaner.
I came to know a SyntaxHighlighter which displayes your code exaclty what i was expecting. Thanks a lot for SyntaxHighlighter :).Below is the Step how you can integrate the  SyntaxHighlighter in your Blog/ Web Site.
For people who uses the Hosted Application like blogger.com, can use the online hosted javascript files from SyntaxHighlighter.
Step 01:
* Click Here to download the SyntaxHighlighter javascript code.
* For the people who uses blogspot and WordPress can wait :) (we can direcly use the code from their server)
STEP 02:
* Place the below code above <head> HTML tag of your HTML page.
* For  blogspot and WordPress users it will be  templete.xml file or the HTML column of the layout page.























Disable the language (here its computer language) which you may not use. For me i am java developer, i will not post code which are from VB, so  i am commented that. This disabling will give you performance in page load.
For the people who want to use online version should pre fix "http://alexgorbatchev.com/pub/sh/2.1.364/" in all your src attributes.
STEP 03:
Add your code inside the pre tag,and you have to define the class based on your code language.
public class AntHelloWorld {
 public static void main(String[] args) {
  System.out.println("This Project was build using Ant");
 }
}
As the above code is a java, so we are using class="brush: java", this decides which syntax coloring need to be used.

No comments:

Post a Comment

 

This content comes from a hidden element on this page.

The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.
Click me, it will be preserved!

If you try to open a new ColorBox while it is already open, it will update itself with the new content.

Updating Content Example:
Click here to load new content