I write on technical subjects on this site on a fairly regular basis, and nothing annoys me more than blog software which “eats” long lines of code or renders it in a difficult-to-read way. Happily Serendipity (or s9y for short) has a plugin for geshi.

About GeSHi

I thought “geshi” was a word but I just looked it up to link to it and it turns out its actually GeSHi (Generic Syntax Hilighter) which is a very humane way of pronouncing the thing. It is a very popular way to render source code on the web and was originally intended for phpBB. Geshi is great, it has lots of pre-made syntax highlighting rules so the odds are that it can probably already render whatever language you are coding in very nicely, however if it doesn’t then that’s fine too – it is an open standard and you can jump in and write your own.

Using GeSHi

Back to this blog, I added the “Markup: Geshi” plugin from SPARTACUS (the serendipity plugin repository) and added it as an event plugin. I had a lot of problems getting it working – putting it first in the list of event plugins eventually did the trick for me. You use geshi by adding geshi tags around the code you want to show, for example:

phpinfo();

phpinfo();

Styling GeSHi

Another problem I had initially was with the default resulting fonts, however these are easy enough to change and I now have colours I chose myself (illustrated in my posts about a SOAP server and PHP compilation) which is really quite easy to do. The plugin has files with all the language highlight in them and if you scroll down and look at the “color” entries towards the end of these, it is possible to just replace the red/green/blue defaults with colours that fit in with your look and feel (pink in my case, obviously!). For me the syntax files are in serendipity/plugins/serendipity_event_geshi/geshi – this is also a good place to look to see what languages you have that are supported.

I commonly use:

• php
• bash
• xml
• sql

A useful tip for styling is that the code block is placed into a div with a class named the same as the “lang” attribute – so for example I’ve got some of them resized by adding an entry to my overall css file.

Hope this helps someone, I remember having problems finding much info about using geshi in this way when I first added the plugin. If anyone is having problems feel free to post comments, I have this working on my serendipity installation so I am happy to try to help out.