In the vein of having a driving goal to this blog (as well as having a motivating example for myself while exploring these new technologies), and also because its cool these days to have a "Project" of some kind to be working on, introducing:

Project: JadeMUD

Purpose:

Provide a compelling and functional HTML5 based MUD client, especially for touch interfaces such as tablets like the iPad.

Motivation:

I recently got back into playing MUDs (multi user dungeons) which are text-only RPGs. They are usually played over a telnet connection and there are various clients the can be used to connect to MUD servers (telnet, zMud, TinTin, Mudlet, etc). However, being text based games they require a lot of typing and hence attempting to play them on a touch device like an iPad is painful to say the least. Being as I like to use my iPad I would love a way to play, but using touch, instead of tons of typing. But instead of making a native iOS app, I figure this would be a great project to do in HTML5/JS and give a chance to learn more about that kind of development (a personal goal of mine) and get to work on/with MUDs which are tons of fun. Not to mention potentially giving a more natural interface than just text input at a console can provide and pull newcomers to mudding into the game. This worthy goal presents 3 main challenges as I see it right now. Maybe I'm being short sighted and there are many more obstacles to come :) but right now I see:

1. Piping MUD text input/output to the webpage
2. Understanding MUD protocols to talk to the server using compression (for instance) and background communication
3. Displaying everything onscreen in a touch friendly way

All of those seem overcomable and I have a plan of attack for each below in the Plan section.

Product:

Plan:

Blogger Syntax Highlighting

I just figured out how to auto syntax highlight and pretty print code in Blogger and I might as well write a post saying how I did it. All in all it was very straightforward.

Step 1)

Go into Blogger's "Design" tab for your blog and go into the "Edit HTML" tab for your style. Go down to just before the </head> tag and paste the following:
Notice that last little CSS snippet. For some reason (bug) the code segments that this generates will always have a vertical scrollbar when rendered in Chrome, even though a scrollbar is not needed. The workaround is that CSS which disable vertical scrollbars for the code region.

In this example I only added the scripts for HTML/XML, CSS, and JavaScript, but there are other script for other languages available like C++, C#, Python, Ruby, etc.

Step 2)

Final step is to add your code snippet. You can do it with a <pre> that has a class attribute that indicates the language of the code within. For example the following code in your Blogger post:

<pre class="brush : js">
function addition(a, b) {
    return a + b;
}
</pre>

Will produce a final output like the following:

function addition(a, b) {
    return a + b;
}