In response to Mark Pilgrim’s “Pushing the envelope” post, Hans Nowak complains that sometimes semantically correct HTML elements don’t “look good”. So, he tends to use <pre> instead of <code> to designate code fragments in web pages.
The answer, of course, is to just use CSS to make <code> act more like <pre>. Here’s my CSS:
code {
white-space: pre;
}
And here’s how it renders Hans’ code fragment:
def f(x, y):
if x > y:
print "foo!"
else:
print "bar!"
Related posts:
- Upgraded
" I’ve upgraded this site to WordPress 1.2. The process was quick and painless. It took me about 20 minutes, 15 of which was spent..." - XSLT-Fu
" I’ve recently started learning XSLT. The basics aren’t too hard, but as usual, I’ve been trying to move faster than I can absorb things...." - Beyond Time and Space
" Many years ago, a friend of mine showed me a book called The Tao of Programming. The koans contained within struck a chord with..." - WordPress 1.2 “Mingus”
" Yesterday, Matt released WordPress 1.2 (nicknamed “Mingus”). The whole team put a lot of effort into this release. And I’m also proud that WP..."
3 Comments
This is how I’d do it too. I’m told IE doesn’t support CSS’s white-space tho. I wouldn’t know for a fact, since I never need to use IE. Mozilla & Opera work better and handle more coding capabilities . Hmmm….maybe this is a good reason to start slapping “works best in Mozilla” or “Viewed best in Opera” phrases/images on websites. I remember when the web used to be filled with “Best viewed in Netscape” images.
I can vouch that it works fine in IE 5.5 and 6.0. I suspect that it IE 5.0 also understands “white-space:pre”, but I don’t know about 4.0.
What’s wrong with using
<pre><code>
var x = z - y++;
</code></pre>?
You don’t have to worry about support for white-space: pre; then, and it’ll work in all browsers that can do <pre>