.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.
Code Project VB.NET Article Award Dec 2008
October 4, 2009 at 11:56 pm |
This is awesome, and will be really helpful for my own wordpress blog. Is there any way to edit a current entry and fix the code formatting? I tried to copy and paste from a draft into an edit of a current post, and it completely didn’t work. And what theme do you use that gives you the page links across the top under the title? You can tweet me @RobinDotNet or post follow-up comments here. Thanks much.
October 5, 2009 at 9:16 am |
Robin,
My theme name is at the very bottom of this page. Name is, “Contempt”
The plug-in on this page works from Visual Studio.
My best advice would be to recreate the code in VS and then use the plugin and above directions.
Cheers,
Karl
October 5, 2009 at 9:23 pm
Thanks Karl. I tried to edit a post that I had already posted with code in it, but apparently I can’t edit or replace part of a post without having the same problems you had above — it puts extra line feeds after every line of code. So I’ll have to live with what I have know that thanks to you I can have beautifully formatted code going forward. Thanks again.
October 6, 2009 at 9:38 am |
robin,
You’re using Live Writer correct?
If you open the post in Live Writer, remove the old code, insert the new it should work perfectly.
Question: Does your current CSS have settings that may cause the Live Writer plugin to render differently that expected?
Karl