Use prettyprint in the Chrome debugger

In version 12 of Chrome they added the ability to de-obfuscate (un-minify?) the JavaScript on the sources tab by right clicking the code area. Today that feature lives on in the "pretty print" feature located at the curly brace icon on the bottom of the debugger.

Using google-code-prettify in your blog

Until now to make my source code pretty I've used a pretty dodgy method that involved going from Visual Studio to Word to Blogger and surrounding the lot in a div to apply some styles to the whole thing. This has resulted in HTML source looking something like this:

<div style="background-color: #f0f0f0; border: 1px dashed #CCCCCC;">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: red; font-family: Consolas; font-size: 9.5pt;">position</span><span style="font-family: Consolas; font-size: 9.5pt;">:<span style="color: blue;">fixed</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: red; font-family: Consolas; font-size: 9.5pt;">top</span><span style="font-family: Consolas; font-size: 9.5pt;">:<span style="color: blue;">50%</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: red; font-family: Consolas; font-size: 9.5pt;">left</span><span style="font-family: Consolas; font-size: 9.5pt;">:<span style="color: blue;">50%</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: red; font-family: Consolas; font-size: 9.5pt;">width</span><span style="font-family: Consolas; font-size: 9.5pt;">:<span style="color: blue;">200px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: red; font-family: Consolas; font-size: 9.5pt;">height</span><span style="font-family: Consolas; font-size: 9.5pt;">:<span style="color: blue;">150px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: red; font-family: Consolas; font-size: 9.5pt;">margin-top</span><span style="font-family: Consolas; font-size: 9.5pt;">:<span style="color: blue;">-75px</span>; <span style="color: darkgreen;">/* negative half height */</span><o:p></o:p></span></div>
<span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">margin-left</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">:<span style="color: blue;">-100px</span>;
<span style="color: darkgreen;">/* negative half width */</span></span></div>

Disgusting I know, not only does it look gross but it also makes it a lot more difficult to work on posts using my mobile. So I decided to look into a prettyprint alternative, I found google-code-prettify as one of the first search results and went into investigate. It is a very simple process to get it up and running using the following steps: