This article is considered obsolete. Please read the followup post.

From time to time I would like to publish a post in which I can show code snippets. However the standard <code> or <pre> tags look way too boring. Something with color stands much more out. I was thinking: if I had my own server and would host my blog there, I could add automatic syntax highlighting in no-time using GeSHi (Generic Syntax Highlighter). Then it hit me: why not use the demo hosted by them and copy the output over as HTML? It’s not as elegant or simple as having a server-side script taking care of it, but it’s better than the standard look. So here are the steps:

1. Head over to the GeSHi demo page and plug your source in. Play around with the settings until you get a satisfying result.
2. Save the resulting page (it would easier to use view source, but since this is a dynamically generated page using parameters passed with the POST method – rather than GET – it doesn’t work).
3. Open it in a text editor (like gedit or notepad) and find the style section where it says <style type=”text/css”>/* GeSHi (c) Nigel McNie 2004 (http://qbnz.com/highlighter) */ and copy it over to the blog post
4. Find the start of the code (you can do this easily by searching for style="border: 1px dotted and copy it over until the end of the code. This you can recognize by the sequence </div></li></ol>
5. Add a final </div> after the part you just copied.
6. Because I use a Blogger template which styles list items in a special way and also restricts the width of the part where the post is displayed, I have to add the following lines to the style sheet:

   div.code { overflow: auto; width: 100%; }
   div.code li {
    list-style: decimal outside;
     padding-left: 0px;
     margin-bottom: 0px;
     background: none;
   }   
   

   and also add the code class to the starting div (to do this go to the start of the part you copied and where it says class="[something]" add code, so that it looks like this: class="[something] code"

7. Enjoy 🙂

There are a few problems with this approach: (a) the biggest is that it’s a multi-step fairly complicated procedure (b) If you have multiple post with source code on your page you will have duplicate style-sheet information in your page (c) It is not recommended to include style information in-line or in the main body (the style tags you copy will end up in the body instad of the header where they should be put) (d) While copying the code you might have some weird characters appear (e) GeSHi is not perfect (for example in the code below it gets confused by the embedded javascript), but it’s the best I’ve found so far. It is a beta solution and if any of you have ideas on how to improve it, please take the time to write a comment. As a bonus you find below the source code for my Javascript random password generator (not that you couldn’t do a view source until now, but this is more accessible).