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”:1 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.

; ?>

< ?php title(); ?>
< ?php the_content('

; ?> < ?php link_pages(' Pages: ', '', ); ?>

< ?php endwhile; endif; ?> < ?php edit_post_link('Edit this entry.', ' ', ''); ?>

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.

[1(Formatting code bits elegantly)]http://txfx.net/2005/03/04/spam-karma-hack-spam-leftovers/

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 |