Blogging about your Code

I frequently need to post code samples to this blog.  This seemingly easy task has been a source of almost constant aggravation.  I've been unhappy with almost every technique I've found for publishing code to my Sitefinity blog.  Below we're going to look at the various methods I've used and the associated problems. 

The Easiest & Cleanest Solution

Let's first look at the easiest & cleanest solution available...the <pre> tag.  This HTML tag has been around forever.  It simply designates a block of preformatted text.  Spacing, tabs and line breaks will be rendered in the browser rather than filtered.  Let's look at an example:

<pre>
    using System;
    using System.Web;

    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write("Truffle Shuffle!");
        }
    }
</pre>

This is perfect!  There aren't any obscure HTML or stylesheet tricks here.  Just a block of text you could easily read in the page source.

This method does not, however, give us the syntax highlighting we've all grown to know & love in Visual Studio and other IDE's.  Let's look at some other methods that retain this syntax highlighting.

Pasting from Word

You can copy & paste your code from Visual Studio into Word.  The syntax highlighting in Visual Studio will be preserved in Word.  You can then copy & paste from Word into RadEditor.

Visual Studio -> Word -> Sitefinity/RadEditor

RadEditor will do its best to clean-up the code while still preserving the formatting.  The result isn't anything I would want to use as an epitaph however.  Let's look at the HTML generated by this method:

<style>
    <!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1610611985 1107304683 0 0 159 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} @font-face {font-family:"DejaVu Sans Mono"; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-charset:0; mso-generic-font-family:auto; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:3 0 0 0 1 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0in; margin-right:0in; margin-bottom:10.0pt; margin-left:0in; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt; line-height:115%;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.0in 1.0in 1.0in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} -->
</style>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(95, 95, 216); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&lt;pre&gt;</span></p>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(224, 224, 224); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;&nbsp;&nbsp; using System;</span></p>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(224, 224, 224); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;&nbsp;&nbsp; using System.Web;</span></p>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(224, 224, 224); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;</span></p>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(224, 224, 224); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;&nbsp;&nbsp; public partial class Default : System.Web.UI.Page</span></p>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(224, 224, 224); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;&nbsp;&nbsp; {</span></p>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(224, 224, 224); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; protected void Page_Load(object sender, EventArgs e)</span></p>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(224, 224, 224); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {</span></p>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(224, 224, 224); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Response.Write("Truffle Shuffle!");</span></p>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(224, 224, 224); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></p>
<p style="margin-bottom: 0.0001pt; line-height: normal;"><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; font-family: &quot;dejavu sans mono&quot;; color: rgb(224, 224, 224); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&nbsp;&nbsp;&nbsp; }</span></p>
<p><span style="background: black none repeat scroll 0% 0%; font-size: 12pt; line-height: 115%; font-family: &quot;dejavu sans mono&quot;; color: rgb(95, 95, 216); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">&lt;/pre&gt;</span></p>

That's a lot of HTML!  RadEditor has options for stripping some of this gunk away.  However, each time you strip some of this formatting you will lose a bit more of the syntax highlighting. 

RadEditor's Format Code Block Feature

Over a year ago, Ben (on the Sitefinity forums) told me about the Format Code Block feature available in RadEditor.  This feature is disabled by default in Sitefinity but can be easily enabled. 

Just insert the following FormatCodeBlock line into one of the <tools> sections in the ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml file:

  <tools name="MainToolbar" dockable="false">
    ...
    <tool name="FormatCodeBlock" enabled="true"/>
    ...
  </tools>

Enabling this feature will place a new Format Code Block tool in RadEditor:

This will enable you to easily paste syntax highlighted code samples into your blog post:

This makes it really easy to publish code samples, but let's look at the resulting HTML code:

<div style="border: 1px solid rgb(127, 157, 185); overflow: auto; background-color: white; line-height: 100% ! important; font-family: courier new; font-size: 11px;">
<table cellspacing="0" cellpadding="0" style="border-width: 0px; border-bottom: 0px solid rgb(238, 238, 238); margin: 2px 0px; width: 99%; border-collapse: collapse; background-color: rgb(255, 255, 255);">
    <col style="border-bottom: 1px solid rgb(247, 247, 247); font-family: courier new; font-size: 11px; padding-left: 10px; white-space: nowrap;" />
    <tbody>
        <tr>
            <td><span style="font-size: 11px;"></span><span style="color: blue;">using</span><span style="font-size: 11px;">&nbsp;System;&nbsp;</span></td>
        </tr>
        <tr>
            <td style="background-color: rgb(247, 247, 247);"><span style="color: blue;">using</span><span style="font-size: 11px;">&nbsp;System.Web;&nbsp;</span></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="background-color: rgb(247, 247, 247);"><span style="color: blue;">public</span><span style="font-size: 11px;">&nbsp;partial&nbsp;</span><span style="color: blue;">class</span><span style="font-size: 11px;">&nbsp;Default&nbsp;:&nbsp;System.Web.UI.Page&nbsp;</span></td>
        </tr>
        <tr>
            <td>{&nbsp;</td>
        </tr>
        <tr>
            <td style="background-color: rgb(247, 247, 247);">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue;">protected</span><span style="font-size: 11px;">&nbsp;</span><span style="color: blue;">void</span><span style="font-size: 11px;">&nbsp;Page_Load(</span><span style="color: blue;">object</span><span style="font-size: 11px;">&nbsp;sender,&nbsp;EventArgs&nbsp;e)&nbsp;</span></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;</td>
        </tr>
        <tr>
            <td style="background-color: rgb(247, 247, 247);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Response.Write(<span style="color: blue;">"Truffle&nbsp;Shuffle!"</span><span style="font-size: 11px;">);&nbsp;</span></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;</td>
        </tr>
        <tr>
            <td style="background-color: rgb(247, 247, 247);">}&nbsp;</td>
        </tr>
    </tbody>
</table>
</div>

RadEditor is a great tool, but it can't perform miracles.  In order to apply syntax highlighting RadEditor must generate inline styles.  The downside is this results in a lot more generated code.

Windows Live Writer Plugins

I write all of my blog posts in Windows Live Writer.  I love this tool!  There is an extensive gallery of Live Writer plugins for you to choose from.  Within this gallery, there are many plugins for publishing code samples.  Almost all of them, like RadEditor, use inline styles to provide syntax highlighting.

However, I did find one plugin that allowed me to turn-off embedded styles and use my own external stylesheets: Insert Code for Windows Live Writer

This is the plugin I've been using for the past several blog posts to provide code samples.  The resulting HTML code is much better.  Here is an example:

<div>
  <pre class="csharpcode"><span class="kwrd">using</span> System;
<span class="kwrd">using</span> System.Web;

<span class="kwrd">public</span> <span class="kwrd">partial</span> <span class="kwrd">class</span> Default : System.Web.UI.Page
{
    <span class="kwrd">protected</span> <span class="kwrd">void</span> Page_Load(<span class="kwrd">object</span> sender, EventArgs e)
    {
        Response.Write(<span class="str">&quot;Truffle Shuffle!&quot;</span>);
    }
}</pre>
</div>

Because I'm no longer using inline styles I needed to externally provide information about the styles (csharpcode, kwrd, str) I'm using above.  I added these style definitions to my ~/App_Themes folder. 

This makes the setup a bit more complex, but the resulting HTML is smaller, cleaner and easier to maintain.

Code Prettify for Windows Live Writer Plug-in

I remained unhappy with the method above however.  In my opinion, there was still too much markup code.  While researching this topic I discovered Google Code Prettify.  Google Code Prettify uses a combination of stylesheets & Javascript to do client-side syntax highlighting. 

To make use of this, simply surround your code with a <pre> tag and then apply a prettyprint style to this tag.  You then attach some Javascript to your web page.  When the page is loaded in the browser the Javascript fires and applies syntax highlighting to any <pre> tags that have the prettyprint style applied to it. 

I created a very very VERY small Code Prettify for Windows Live Writer Plugin to help with this task.  Let's look at the resulting code:

<pre class="prettyprint">
    using System;
    using System.Web;

    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write(&quot;Truffle Shuffle!&quot;);
        }
    }
</pre>

This is as close to perfect as I think I'll get.  This method does require some extra setup work.  You will need to manually add Google Code Prettify to your web site.  This will require you to alter your page templates and ~/App_Themes stylesheets.

In my view, the minor setup hassle is totally worth it though.  Happy blogging!