April 27th, 2005

Formatting Code Samples in Posts Using CSS

Permalink | ~ WordPress

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.

3 Responses to “Formatting Code Samples in Posts Using CSS”

  1. Mark J Says:

    IE requires a bit of coaxing to work… you probably didn’t notice because it is in a separate css file that I only show to IE. You can see it here. word-wrap: break-word; for blockquote { } does the trick. Note that it looks different in IE (it wraps) than it does in FireFox (scrolls), but I can live with that.

  2. Zoinger Says:

    MarkJ,

    Thanks for the help! Obviously, my CSS skills are a bit… lacking. I’ll try some more over the weekend to try and get this to work.

    Yeah, I noticed that your site wraps in IE. I can live with that too.

    -danoschmano

    P.S. I love your IE warnings!

  3. Zoinger Says:

    MarkJ,

    Oh, I love the layout of your site too. Lots of trick stuff everywhere. Someday perhaps Zoinger will get there.

    -d

Leave a Reply

You must be logged in to post a comment.


Technorati Profile |