Code display: Moving back from screen captures to text

Posted May 21st 2008 to General,Web

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?

3 Comments

Comments

  1. Jonas Follesø
    June 2nd, 2008 | 5:15 pm

    Hi Jeff,

    I’m moving from code in text to code in images. The reason is that I seldom include enough code to be copy-paste runnable… In my post I normally only include snippets that in it’s self is useless.. I do include downloads for users who wan’t to run the code.

    I think images is the “only” way to go to get a great RSS reader experience… And for me that is key. Personally I only “shell out” to blogs to leave comments, I do all my reading in Google Reader.

    Cheers,
    Jonas

  2. Jeff Wilcox
    June 2nd, 2008 | 5:20 pm

    Argh! Thanks Jonas… now I’m once again confused with my decision.

    I suppose it might be possible to write a quick WordPress plug-in: RSS feeds get images, live site visits get the rich code experience. But it’ll be a lot more work to write and maintain a post :-(

  3. Ruurd Boeke
    June 4th, 2008 | 4:26 am

    Hi Jeff,

    There are a few utilities around that will create great inline style markup, so that the code looks good for both rss as live visits. Key is to not have a tool parse the code itself: it will only highlight the regular ‘known’ c# keywords.
    Better is to work with the markup that visual studio copies to your clipboard.

    I use an adjusted version of a wpf tool that Kevin Moore wrote.
    Mail me if you want more information. Check out my blog for how it looks.