Tuesday, September 27, 2011

How to format code in your blog - the easy way

I've spend numerous hours trawling the internet looking for ways to make the code that I use in my blog easy to read and nicely formatted. Unfortunately I've never managed to find anything that cuts the mustard and I had resigned myself to having to use numerous hacks. That is until I saw a colleague cut and paste some code that he was working on into a Wiki and it came out perfectly formatted straight from Visual Studio!

"How the %$#@ did you do that?" I shouted
"Don't know - I just cut and pasted" was the reply
"Can't be. Visual Studio doesn't use HTML for it's code editor"

Sure enough when we cut and pasted the code into a text editor you could see that it was perfectly styled using CSS. Afer a bit of digging we discovered that he had Power Productivity Tools installed which has the capacity to enable HTML cut and paste - Eureka!


You can get this add on using NuGet (Tools -> Extension Manager -> Online Gallery and then search for Power Productivity Tools).

Now I can cust and paste code like this straight from Visual Studio:
<h2>Log On</h2>
<p>
    Please enter your pin and password. 
</p>
 
@Html.ValidationSummary(true"Login was unsuccessful. Please correct the errors 
and try again.")
 
@using (Html.BeginForm()) {
    <div>
        <fieldset>
            <legend>Account Information</legend>
.....
 
 


Enjoy!