Making code display better on your blog


My blogging tool is Windows Live Writer and I use the "Insert From Visual Studio" plug-in to get pretty looking code into my postings.  The generated code uses the <pre> tag for formatting the elements. 

Unfortunately my blog provider doesn’t always render this properly and will clip text that is too long.  Ideally I would like to either

  1. Wrap code that overflows the page
  2. Put up a localized scroll bar for the code snippet

Luckily the plug-in puts the outer most <pre> tag into it’s own CSS class: code.  This makes the problem easy with a CSS override.

pre.code {
  overflow : auto;
}

Comments (5)

  1. Domenic says:

    Unfortunately it looks like crap in my feed reader :(. (Outlook 2007.) Linebreaks don’t seem to be happening, for one.

  2. jaredpar says:

    @Domenic,

    I verified in outlook tha this is the case.  I’m not sure what is going on there as the code displays fine in other readers.  Hopefully it’s an issue fixed in a newer version of the plugin.  I’m going to look into that over the weekend.

  3. Here’s what I do to ensure that it looks good on the web and in the feed — at least with the readers I’ve tried (google reader, gator, rss bandit, outlook, etc.).

    http://diditwith.net/2007/09/19/HowIFormatCodeForTheWebAndRSSFeeds.aspx

  4. world.com.ru says:

    This blog has been created to share useful information. Thanks and greetings!

  5. Koush says:

    I’ve been putting the code in a scrollable container.