Dear reader of Juri's TechBlog,
I moved my blog to a new domain and a new hosting solution as well. I'm now blogging on juristr.com.

Finally syntax highlighting on my blog!!

This was actually a point which was somehow a thorn in my side. I wasn't far from writing my own syntax highlighting javascript... Today however I found one that works great. It is simple, adaptable and easily configurable.
The used strategy is the one that is most commonly used by web-based syntax highlighting tools. It basically consists of two components: a CSS and a JavaScript file. The CSS file defines the different tag-colors that will be used for highlighting. The src-code that is published on some HTML page is usually placed inside a pre or code container. This container is then parsed by the JavaScript file which assigns the CSS class declarations to the correct keywords, having the effect of highlighting them.

But now some more details to the tool itself that I've found. It is called "google-code-prettify" and can be found here. For more details about the configuration stuff and how it can be implemented on your own website just refer to the README.html page on the project site, which explains clearly all the necessary steps that have to be taken.

Here are some examples how it looks like (also here):
My old code formatting style:

public class MyTest{
private String myString;

public MyTest(){
this.myString = "Hello World!";
}

public void printMessage(){
System.out.println(myString);
}

public static void main(String[] args){
MyTest t = new MyTest();
t.printMessage();
}
}
New google-code-prettify style:
public class MyTest{
private String myString;

public MyTest(){
this.myString = "Hello World!";
}

public void printMessage(){
System.out.println(myString);
}

public static void main(String[] args){
MyTest t = new MyTest();
t.printMessage();
}
}
The colouring works perfectly. I also modified the highlighting script a little such that I was able to keep my way of highlighting things in the code:
...
System.out.println(myString);
That was quite easy since I just needed to add some lines to the CSS file.
What I've still to optimize is the loading of the JavaScript files. I'll see whether I can do that in an asynchronous mode because otherwise it starts to slow down the loading of my blog as the number of scripts increases.
If you have problems in configuring the google-code-prettify script on your own blog, just drop me a line.

Posts you might also be interested in..

Credits: Hoctro | Jack Book

6 Comments:

Juri Strumpflohner said...

Another way of adding syntax highlighting.

Juri Strumpflohner said...

Quite interesting also this post:
http://abhisanoujam.blogspot.com/2008/12/blogger-syntax-highlighting.html

Gilad Naor said...

Thanks for the post. I currently prefer a method which doesn't require installing anything:
Source Code Highlighting in Blogger

Juri Strumpflohner said...

Hi,
you're solution is also not that bad. However it has the drawback that I have always to convert my code I'm going to paste. With my solution instead you can just copy it to blogger or write it directly. The rest will be done at run-time by the installed JavaScript. So I don't have to worry about highlighting, just to post my code.
I found however may alternatives (as you also mentioned in your blog post) that may be better. I just like the way the syntax highlighting is done since it works (and quite meaningful) for most programming language and moreover by having a CSS file it can be easily adapted to ones needs.

Thanks for your comment anyway :)

Jason A said...

Your post was helpful in getting this installed on my blog.

I had problems using <code> tags as a wrapper. Ended up using <pre&gr; tags.

Here's a link to have a look:
blog.XeroOne.com/post/ASPNET-Create-User-Wizard-Control.aspxThanks.

Carter said...

i wrote a post on a really cool syntax hi-lighter that has styles,copy to clipboard and tons of support for different languages

read my tutorial about how to install it here

Post a Comment