Code display: Moving back from screen captures to text

Posted 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:

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 Principal Software Engineer at Microsoft in the Open Source Programs Office, helping Microsoft scale to 10,000+ engineers using, contributing to and releasing open source.

comments powered by Disqus