Code display: Moving back from screen captures to text

21 May 2008

Blog authors have always struggled (well, at least I have!) with the issue of pasting in code samples. In the past I’ve tried a few things, from using Visual Studio to WordPress formatting tools to Windows Live Writer plugins for code. I settled on using screen captures, with the intention of attaching the code projects as downloadable text files.

Today, I’m making an attempt to move back to raw <pre /> tags, populated with text, that should be formatted on the fly by modern web browsers. This is great for folks that visit my blog, but does deliver a less-than-attractive experience for newsreaders.

This is accomplished using:

Windows Live Writer
Coskun Sunali’s Insert Tag Snippet plugin for Writer
Alex Gorbatchev’s syntaxhighlighter

Scott Guthrie’s monster blog posts are amazing, and the look is consistent everywhere. This is because they’re full of Visual Studio + code screen captures. I’m sure the syntax highlighter screen caps set off the latest wave of .NET developer’s color customizing that’s on all the dev’s machines that I’ve seen.

Here’s what C# code used to look like on my blog:

On to samples of the new system:

C#

    [TemplatePart(Name = HyperlinkButton.StateDisabledName, Type = typeof(Storyboard))]
    public partial class HyperlinkButton : ButtonBase
    {
        #region NavigateUri
        /// <summary>
        /// Gets or sets a URI to navigate to when the link is clicked.
        /// </summary>
        [TypeConverter(typeof(UriTypeConverter))]
        public Uri NavigateUri
        {
            get { return GetValue(NavigateUriProperty) as Uri; }
            set { SetValue(NavigateUriProperty, value); }
        }

Visual Basic

Imports Microsoft.Silverlight.Testing
Imports Microsoft.VisualStudio.TestTools.UnitTesting

<TestClass()> _
Public Class Class1

    ' This is a super simple test
    Public Sub SimpleTest()
        Assert.IsTrue(True)
    End Sub

End Class

JavaScript

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = ss;
cssNode.media = 'screen';

// Append the new node
head.appendChild(cssNode);

XML

<?xml version="1.0" encoding="utf-8"?>
<items>
  <item type="photoset" id="395" owner="12037949754@N01"
		primary="6521" secret="5a3cc65d72" server="2"
		commentsold="1" commentsnew="1"
		views="33" photos="7" more="0">
    <title>A set of photos</title>
    <activity>
      <event type="comment"
			user="12037949754@N01" username="Bees"
			dateadded="1144086424">yay</event>
    </activity>
  </item>
</items>

XAML

<ResourceDictionary 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Default style for System.Windows.Controls.Button -->
    <Style TargetType="Button">
        <Setter Property="IsEnabled" Value="true" />
        <Setter Property="IsTabStop" Value="true" />
        <Setter Property="Background" Value="#FF003255" />
        <Setter Property="Foreground" Value="#FF313131" />
        <Setter Property="MinWidth" Value="5" />
        <Setter Property="MinHeight" Value="5" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Cursor" Value="Arrow" />

I’ll probably do some customizing of the highlighting brushes in the future, or see about porting the library to C# + Silverlight 2. Let me know what you think about this change as I begin posting some new content: a step in the right direction?

Jeff Wilcox is a Software Engineer at Microsoft in the Open Source Programs Office (OSPO), helping Microsoft engineers use, contribute to and release open source at scale.

Follow @jeffwilcox