While making the first article in the "Mistakes I've Made" series. I immediately came across the fodder for the next. I was trying to create CSS for my code examples and discovered that using <pre /> just won't cut it anymore.
I must admit that I already knew that the use of <pre /> was discouraged in XHTML. Still, it was an old habit, and I was in a hurry. Isn't that how all of these things start? So, I wrote some XHTML that looked like this:
Now this displayed fine, until I tried to add CSS to the mix. Here is what I tried first:
code {
margin: 1em;
padding: 10px;
border: 1px solid #CCCCCC;
}This didn't work at all, and so next I tried adding the nested <pre /> to the CSS selector: code pre. That didn't work either, so next I tried: div.code and finally: div.code pre seemed to work. That is until I checked it out in Internet Explorer. Once again, the world's most used browser didn't want to play nice.
At that point I gave up and started looking for a code highlighting tool. GeSHi looked good, but their Drupal module hasn't had any activity in about a year. In the end I settled on the simple codefilter module. It works well enough for now and I will try to update this if I find something better in the future.
Again, I hope that this saves someone from a headache. Check back often for new articles.
Bonus question:
Since the codefilter module automatically converts anything between the <code> </code> tags. I will leave it up to you to figure out how I marked up the first code example in this article.