I’ve long admired technical bloggers who spout seemingly reams of code listings to illustrate and support their blog articles, whatever the subject.
My recent forays into testing html5 and reporting the findings has lead me to want to produce my own listings. Really simple I thought, just dump the plain text from the source between two <code> tags and hey presto, one listing. Um… No, not quite that simple. It works fine for css – it’s considered plain text unless found in the <head> of a document between <style> tags. Html, however, is more tricky as the browser wants to render it <code> tags or no <code> tags.
Veteran code geeks may laugh and point at my obvious stupidity but I can honestly say it was only after several frustrating minutes of forum searches that the doh! moment struck and I remembered html entities.
So for anyone else out there bashing their head on this seemingly simple conundrum here’s the solution:
- type or paste your html code into your favourite blog software between <code> tags
- change every & to &
- then change every < to <
If you fancy showing the line numbers as well you can always mark up each line as a line item <li> within an ordered list <ol>.
Simple – now I know that is…
… happy code listing!
I use <code> and <pre> for code since it wont then try and render the HTML in it.