Inserting code snippets with syntax highlighting in a document can be useful – especially for documents devoted to software development. If you’ve ever dreamed of adding one to your document created with RadRichTextBox – congratulations, the time has come! Due to a request from the Sitefinity Lightning guys, which use RadRichTextBox as a blog post editor available in the desktop client, we have decided to implement this feature and it’s already live with the 2013 Q2 version of RadControls for Silverlight and WPF. You can try the Silverlight version in this online demo right away, navigating to the ”Insert” tab, ”Text” group in the ribbon.

They’re editable!

We provide built-in UI that can be used to insert and, notice, edit code blocks. The Code button in the default ribbon UI will open a nice dialog:

When the current position is in an existing code block, the dialog will load the source code that has already been input, thus allowing the code block to be edited. There is also a helpful context menu that allows fast editing/deleting: 

Insert one programmatically

Of course, you can add/delete code blocks via the API using InsertCodeBlock/DeleteCodeBlock methods of RadRichTextBox and RadDocumentEditor. The usage is as follows:

Add your language

If you want to format source code in any other language (you may need something esoteric, who knows) – well, you have to code a little, but thankfully not so much in the general case.

For a fully working example, which adds VB.NET to the dialog, you can try the ”CustomCodeFormattingLanguage” project from RadRichTextBox SDK (download from GitHub); but let’s, just for fun, also try this here with one typical representative of the esoteric languages - LOLCODE *. Distilled, it’s three steps:

1. Create a language. You have to give it a name:
   CodeLanguage lolCodeLanguage = new CodeLanguage("LOLCODE");
2. Create a tagger. This will parse the source code with the rules of the language, defining what the keywords would be, how would a comment be denoted, etc. In most cases it’s easier to use the built-in RegexTagger, which uses regular expressions to determine these so called “classification types”:
   var lolKeywords = new List<string>() { "HAI", "CAN HAS", "VISIBLE", "KTHXBYE" };

    

   Regex lolKeywordsRegex = RegexTagger.GetKeywordsRegex(lolKeywords);

   Regex lolStringsRegex = new Regex(DefaultRegexPatterns.StringPattern, RegexOptions.Multiline);

   Regex lolCommentsRegex = new Regex("BTW.*$", RegexOptions.Multiline);

    

   RegexTagger lolRegexTagger = new RegexTagger(

       new Dictionary<Regex, ClassificationType>()

       {

           { lolKeywordsRegex, ClassificationTypes.Keyword },

           { lolStringsRegex, ClassificationTypes.StringLiteral },

           { lolCommentsRegex, ClassificationTypes.Comment }

       });

    

   document.CodeFormatter.RegisterCodeLanguage(lolCodeLanguage, lolRegexTagger);
   
   

   Here I am using RegexTagger.GetKeywordsRegex method, which generates for me the appropriate regex from a list of keywords.

   At the end the tagger is registered in the document’s code formatter for the code language.

3. Create styles for the language elements. Let’s define green keywords, red strings, and blue comments:
   StyleDefinition lolKeywordStyle = new StyleDefinition("lolKeywordStyle", StyleType.Character);

   lolKeywordStyle.SpanProperties.ForeColor = Colors.Green;

   StyleDefinition lolStringStyle = new StyleDefinition("lolStringStyle", StyleType.Character);

   lolStringStyle.SpanProperties.ForeColor = Colors.Red;

   StyleDefinition lolCommentStyle = new StyleDefinition("lolCommentStyle", StyleType.Character);

   lolCommentStyle.SpanProperties.ForeColor = Colors.Blue;

   and register them in the code formatter for our language:

   document.CodeFormatter.RegisterClassificationType(ClassificationTypes.Keyword, lolCodeLanguage, lolKeywordStyle);

   document.CodeFormatter.RegisterClassificationType(ClassificationTypes.StringLiteral, lolCodeLanguage, lolStringStyle);

   document.CodeFormatter.RegisterClassificationType(ClassificationTypes.Comment, lolCodeLanguage, lolCommentStyle);

The API is similar to the one exposed from Visual Studio for its code editor extensibility, and is proven super flexible.

Now we can paste the “Hello World” source code in the dialog as (boring) plain text:

HAI
BTW This prints to the console.
CAN HAS STDIO?
VISIBLE "HAI WORLD!"
KTHXBYE

And see it beautifully formatted: 

And this is just an OK-button-click-away from inserting in the document!

*LOLCODE is an esoteric programming language.