My currently preferred approach uses google-code-prettify, which I suspect is the package used to perform syntax highlighting in google project hosting. Integrating this package in Blogger requires three steps:
1. Update the <head> section of your Blogger template
Insert the following lines of code:
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify/prettify.css" rel="stylesheet" type="text/css"/> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript" />2. Update the <body> element tag of your Blogger template
Change it to:
<body onload="prettyPrint()">Save these changes to your template.
3. Insert your code using <code class="prettyprint lang-java">
You must be in "Edit Html" mode, not "Compose" mode, when you do this. Here is an example of the results:
/**
* Creates a new CD, provided its title, group, and song list.
* @param title The title.
* @param group The group.
* @param tracks The song titles.
*/
public CompactDisc(String title, String group, String... tracks) {
this.title = title;
this.group = group;
this.tracks = Arrays.asList(tracks);
// Since CompactDiscs are immutable, the hash value will never change for an instance.
this.hashvalue = (new String(title + group)).hashCode();
}
OK, if you have followed me so far, and if your Blog template has a light background, then the code should be formatted nicely. However, if your Blogger template has a black background like mine, then the results are terrible, because the default colors in prettify.css are designed to look good against a white background, not a black background.
The reason why my code sample looks relatively reasonable is because I use a custom version of prettify.css where I have changed the colors to those that contrast well with a black background. This file is available to you at:
http://ics-software-engineering.googlecode.com/svn/trunk/prettify/prettify.css
So, use this URL in the <link> element that you inserted into the <head> element of your Blogger template, and you should be fine.
If you don't like my choice of colors (or google's), you can create your own prettify.css, place it somewhere on the web, and reference it to get your own coloring scheme.
There is a bug in Blogger that you should be aware of: if you switch back and forth between "Compose" and "Edit HTML" mode while doing this, at some point Blogger eliminates all indentation in your code. You can avoid this by not using "Compose", or else by inserting your code as the last step in creating your posting.
2 comments:
Thats cool! Thanx!
Thanks for the information. However, the css url you provided returns a 404. It should be http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css
Post a Comment