A syntax highlighting TextBlock for Silverlight 3
I’ve adapted a syntax highlighting engine to generate a syntax highlighting TextBlock control for Silverlight. This control has built-in syntax highlighting C#, C++, JavaScript, VB.NET, XAML/XML.
In the future, once Silverlight 4 is out, I’ll of course make sure to update this to work with the rich text control to allow for copying and pasting as well, but in the meantime, this works great for displaying code.
Based on ColorCode
A while ago I was happy to see that Drew Miller released a simple syntax highlighting engine called ColorCode. It is a good implementation that moves forward through a stream, provides scoping information, and is compact enough for client use.
The control, however, was designed to only target ASP.NET. It writes out the results using an HtmlWriter. I had to rip out a lot of this implementation requirement that was threaded throughout the code, but what I have now effectively takes a TextBlock and outputs a bunch of Inline elements to it for all the processed code.
Note that I did what it took to get this control functional, this isn’t any sort of reference implementation.
Download the control
Here’s the source and quick sample in a Visual Studio 2010 Silverlight 3 project:
Using the control
Add the control assembly to your Silverlight project. Then, add an XMLNS prefix to your Silverlight page where you’d like to use the control.
There are two properties of interest that should be set or bound: SourceCode (the actual source text), and SourceLanguage. The names probably could be better, sorry!
SourceCode dependency property is the source to syntax highlight, just like the Text property of a TextBlock. The name is different to make it clear that this is not just a TextBlock control since you also need to specify the language type to colorize.
Since this implementation does not “auto-sense” the language, you must provide the language for interpretation. The SourceLanguage property defines this and has a value of either CSharp, Cpp, JavaScript, VisualBasic, Xaml, or Xml. It defaults to CSharp.
This control is small enough that I think it’ll be useful inside code sample apps. It’s 40 KB uncompressed, and 16 KB in a typical Silverlight Xap.
How to get additional language support
The original ASP.NET implementation on CodePlex contained support for a lot of other additional languages and file types:
- ASHX
- ASAX
- ASPX
- ASPX.CS
- ASPX.VB
- HTML
- SQL
- PHP
- CSS
To add any of these to your control, you just need to:
- Add the language name to the SourceLanguageType enum, and plumb its value through the control (sorry for the pain in this step)
- Add the ILanguage file to the control inside the Compilation\Languages\ folder
- Make sure that the language is also in Languages.cs. Note that I’ve kept all the original CodePlex-provided values inside this file to make it easy to add them back.
Hope this helps.
Great stuff. Looking good.
I was fiddling a couple of months ago with a similar control, but stopped after a heap of problems with it.
Now I can get syntax highlighting in my Balder samplebrowser..
Sweet!
Would be nice if it inherited from TextBox instead, so the user can select parts of the code and copy paste it (I gather this is main reason for having this control).
Good Idea !!! Thank you for posting !!!
Btw, I’m getting “An unhandled exception of type ‘System.StackOverflowException’ occurred in mscorlib.dll” when using Xaml or Xml as SourceLanguage. line 59. I don’t think you meant to be calling SetValue again in OnSourceLanguagePropertyChanged. That causes an infinite loop. Also the if condition should probably be using && instead of ||.
Lastly, this check a few lines futher down:
if (e.NewValue != e.OldValue)
shouldn’t really be necessary. They are always different when that method is called (calling setvalue with the same value does not trigger the changedhandler to be called AFAIK).
@Morton
It can’t be based on TextBox because it has no formatting. As he pointed out, Silverlight 4′s richtextblock should be the best of both worlds. Highlightable/Copyable, formattable, inputable.
Jack: Duh! I should learn to read blogposts more thoroughly before commenting
[...] A syntax highlighting TextBlock for Silverlight 3 (Jeff Wilcox) [...]
[...] A syntax highlighting TextBlock for Silverlight 3 [...]
I made a demo about creating a simple syntax highlighting TextBox in Silverlight, taking advantage of templates and databinding (the MVVM way). Editing works and the syntax parser can be replaced with a faster / complete one. You can find it here: http://www.vladhorby.com/Blog/post/2010/05/05/Syntax-Highlighting-TextBox-in-Silverlight-using-MVVM.aspx
This only seems to work with the C# language. whenever I try using other languages I get An unhandled exception of type ‘System.StackOverflowException’ occurred in mscorlib.dll”