Finally syntax highlighting on my blog!!

Edit: Note that this blog post is obsolete as I switched both, my blog hosting provider as well as the syntax highlighting tool.

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

Comments

0

Your ad here?