Displaying chunks of code in a post can be a little tricky at times. It’s hard with WordPress’ default CSS style to have the code format in a readable way. However, I noticed that over on this blog, they had figured out a way to do it using blockquote and pre tags.

For example, here’s a pretty good bit of code where I’m using the new code classes that I’ve set up for the blockquote and pre tags.

; ?>
        <div class="pagepost">
        <h2 id="post-<?php the_ID(); ?>">< ?php title(); ?>
            <div class="entrytext">
              < ?php the_content('<p class="serif">; ?>
    
              < ?php link_pages('<p>Pages: ', '', ); ?>
    
            </div>
        </h2></div>
      < ?php endwhile; endif; ?>
    < ?php edit_post_link('Edit this entry.', '<p>', ''); ?>

Here’s the CSS bits that I added to this site’s CSS file to enable code formatting.

blockquote.code {
    margin: 15px 0px 0 15px;
    padding-left: 0px;
    display: block;
    border-left: 0px
    }

pre.code {
    overflow: auto;
    margin: 0;
    padding: 0 0 0 0px;
    background-color:#F7F7F7
}

I don’t know much about CSS, but it seems to work.

Update: 2005-04-27
Except, of course, this breaks my site’s style in IE. Did I mention that I hate IE. What a piece of $#@! disguised as a browser. I’ll work on fixing this later.

And in the latest update, IE has won. I cut the length of the code sample lines shown above so it doesn’t break the page in IE. Ugh.