Killer Blog Code Formatting

.NET Rocker, Thomas Huber has shared his secret on how to write killer blog entires that display code.  (We who have tried many various workarounds know the pain.)

I really like his techniques and strongly suggest you have a look at his post, “Give your blog-code the ‘Visual Studio’-look.”

http://www.thomasclaudiushuber.com/blog/2008/01/07/give-your-blog-code-the-visual-studio-look/

His blog formatting is killer awesome (bad grammer, but you get the point!). 

Oh, while you there, have a look at his WPF Content, he is another WPF Rocker!

My next Sample Series post (coming soon: WPF MDI For Business Applications) will use his posting technique!

Tips For Using The Plug-In (fine print)

• Preformat your Visual Studio code to 57 characters wide.  I have been using CodeSMART for VS.NET from http://www.axtools.com/ for a very long time now and love this product. 
• Set your Visual Studio Editor tab to equal 2 spaces.  You can do this just for the few minutes you are copying code and then set it back to what you normally use.
• NEVER edit the blog post using the default WordPress online editor after posting from the Live Writer.  At least when I do, WordPress gets all crazy with the content inside the <pre> tags and keeps removing the line feeds for me!!!  This really messes up your work. 
• For whatever reason, my WordPress blog keeps reformatting my <pre> tag which fouls things up.  This even happens when I post from Live Writer.  Example:  The above plug-in wraps your code like this <pre class=”code”>  all your wonderful code is here </pre>.  Well, during the save operation to WordPress, WordPress strips out the class=”code” from my <pre> tag!!!  AHHHH.  So you have to outsmart WordPress and wrap the wrapper in a <div> tag like so:  <div class=”code”><pre> … </pre></div> and everything works as advertised.

How To Use This If You Do Not Have The WordPress Upgrade CSS Editing Feature?

The CSS Editing feature is a WordPress Upgrade.  If you do not have this upgrade you won’t be able to edit your CSS file and use the <div class=”code”> HTML mark-up. 

Not to worry.  You can use the below code in your wrapper <div> tag and get the same output. 

<div style=”border-right: #cccccc 1px dotted; padding-right: 5px; border-top: #cccccc 1px dotted; padding-left: 5px; font-size: 10pt; padding-bottom: 5px; margin: 0px;  >

Here is the really cool part.  Don’t like the above output, then change it!  I’ve got mine set to 9pt and 3px padding.

Have a great day.

Just a grain of sand on the worlds beaches.