Freigeben über

Making code display better on your blog

  • Artikel

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

  • Anonymous
    June 19, 2008
    The comment has been removed

  • Anonymous
    June 19, 2008
    @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.

  • Anonymous
    June 19, 2008
    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

  • Anonymous
    June 19, 2008
    This blog has been created to share useful information. Thanks and greetings!

  • Anonymous
    July 08, 2008
    I've been putting the code in a scrollable container.