Displaying html code listings your blog

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:

  1. type or paste your html code into your favourite blog software between <code> tags
  2. change every & to &amp;
  3. then change every < to &lt;

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!

Fixing footer styling

Happily I appear to have fixed the issue with footer styling as detailed in my last post. Oh to have such an easy answer to all my problems!

The addition of
to the css told the browser (in this case firefox 3.0.6) what sort of element <footer> is and therefore how it should be dealt with.
Result – display as originally expected:

screen shot of firefox 3.0.6
screen shot of firefox 3.0.6

Big thanks to Bruce and David for pointing out this simple but effective solution.

Do not adjust your set it’s just HTML5

I’m lazy by nature and the less I have to type to get something working the better. This is what attracted me to HTML in the first place: meaningful tags reducing the need for div-itis. Adoption by the browser manufacturers seems to continue at their own pace (whatever that really means) and in the mean time something I expected to look like this:

screen shot of firefox 3.0.6
screen shot of firefox 3.0.6

well lets just say, it just didn’t. Not good…

Continue reading Do not adjust your set it’s just HTML5