Syntax Highlighting In Blogs/Websites From Visual Studio for C#, F#, Visual Basic, XML, XAML etc.


When time permits, I enjoy writing the odd article for my blog, and tend to post code samples pretty frequently. There are a number of syntax highlighting tools available (even as add-ons for Windows Live Writer that I compose all my blog posts in) that you find interspersed in blogs over the internet.

I ran into an issue where I was upgrading from Windows Vista to Windows 7 where the live writer add-in stopped working, and transmogrified my code in blog posts, and there was no way to retrieve code if it was a previous post in Windows 7 (used my Vista laptop). I resolved then to seek an alternative solution that emitted pure HTML.

After some trawling about the interwebs, I found the excellent CopySourceAsHtml on Codeplex. When you select code in Visual Studio and highlight it, there is an additional context menu option available to “copy the source as HTML”

copysourceashtml

Selecting this brings up the following form where you can format your code

options

Clicking on OK allows me to paste my code as HTML in C#, Visual Basic and F# thus;

C#

   17     /// <summary>

   18     /// Interaction logic for Window1.xaml

   19     /// </summary>

   20     public partial class Window1 : Window

   21     {

   22         public Window1()

   23         {

   24             InitializeComponent();

   25         }

   26     }

 

  Visual Basic 

    1 Class Window1

    2     Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

    3         MessageBox.Show("CopySourceAsHTML is cool")

    4     End Sub

    5 End Class

F#

   57 /// Compute the highest-common-factor of two integers

   58 let rec hcf a b =                       // notice: 2 parameters separated by spaces

   59     if a=0 then b

   60     elif a<b then hcf a (b-a)           // notice: 2 arguments separated by spaces

   61     else hcf (a-b) b

   62     // note: function arguments are usually space separated

   63     // note: ‘let rec’ defines a recursive function

There is however, a limitation in the Visual Studio 2008 version where you do not get the context menu option when trying to copy XAML. You could do a copy and paste of the .xaml into an .xml file, as the option is available there, but that can get a bit cumbersome.

The easiest “workaround”, is to create a Visual Studio keyboard shortcut. In Visual Studio select Tools then Options, which should bring up the following dialogue;

copy

If you start typing copysour as per arrow above, you should be taken to the CopySourceAsHTML.Copy command. Whilst this is selected, move mouse focus into the Press shortcut keys textbox and press CTRL+Shift+C on your keyboard (or whatever keystrokes you desire), and then press the Assign button. You should have the following;

Assigned

you should then find that if you are in XAML you can CTRL+Shift+C and copy the .xaml thus;

    1 <Window x:Class="SyntaxHighlightingExampleCS.Window1"

    2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;

    3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;

    4    Title="Window1" Height="300" Width="300">

    5     <Grid>

    6 

    7     </Grid>

    8 </Window>