Steve Fenton

<< April | May | June >>

Monday, 16th May 2011

For those who have been visiting for a while, you will have noticed an evolution in how I display code samples on my blog posts. Originally, I just stuck the code in between <pre> tags. It looked a bit like it was code, it preserved white space, it did the trick.

Eventually, I got caught up in the wave of syntax highlighting. First, I used a JavaScript syntax highlighter, which converted my <pre> tags into an ordered list, which gave the code line numbers, it also colour coded pre-defined key words in different colours. I eventually moved to a server-side version of this with a syntax highlighting class that did exactly the same thing, but before the page was rendered.

Now I'm back to using the simple and humble <pre> tag - so why did I ditch all the colour coding and formatting? The simple answer is that it didn't enhance the experience. Most people who find one of my articles are keen to copy and paste the code sample into their preferred development environment, and the <pre> tags let them do that without having to go through what they have pasted to remove all the line numbers (an unfortunate side effect of copy-pasting an ordered list) - and their development environment will colour-code it to their preferences, rather than to someone else's assumptions.

There is nothing wrong with syntax-highlighting on a web page - as long as it doesn't make things worse for the people visiting the page. Most syntax highlighters have a "show plain code" button which pops up a window containing the plain code, so I've just saved people another click when they are trying to find the answers!