ASP.NET Code Colorizer - Render C# and ASP.NET Code Samples in Color.

Display C#, HTML, and JavaScript in color - give your code samples a Visual Studio "look and feel".

Introduction

The VwdCms.CodeViewer control is designed to make it very simple to add color to your code samples. Visitors on your site can see code samples in a friendly, familiar format - the colorized code looks just like it does in Visual Studio.

VwdCms.CodeViewer is a server control that automatically colorizes your code samples - you don't have to write any code.

This ASP.NET code sample colorizer can display and add color to code keywords in C#, HTML, ASPX, and JavaScript.

The VwdCms.CodeViewer can read from a file or you can set its Text in the ASPX page or in code.

See more examples using the VwdCms.CodeViewer control now: VwdCms.CodeViewer Online Examples

Using the Control

To add the VwdCms.CodeViewer control to your project, just follow these steps:

Step 1: Copy these files into your project directory:

1. /App_Code/CodeViewer.cs
2. /App_Code/VwdCms.Html/*.cs (see notes below)

Step 2: Set the Code Color Settings in your Web.config / appSettings section:

<appSettings>
    <!-- begin VwdCms.CodeViewer Settings-->
    <add key="CSharpParserExtensions" value=".cs;.js;"/>
    <add key="HtmlParserExtensions" value=".aspx;.ascx;.master;.html;.htm;.xml;
        .content;.ad;.nav;.pagecontent;.email;.config;"/>
    <!-- text that is not specifically colored will be CSharpColorDefault -->
    <add key="CSharpColorDefault" value="black"/>
    <add key="CSharpColorStrings" value="darkred"/>
    <add key="CSharpColorKeywords" value="blue"/>
    <add key="CSharpColorComments" value="darkgreen"/>
    <!-- text that is not specifically colored will be HtmlColorDefault -->
    <add key="HtmlColorDefault" value="blue"/>
    <add key="HtmlColorTagNames" value="darkred"/>
    <add key="HtmlColorComments" value="darkgreen"/>
    <add key="HtmlColorAttributeNames" value="red"/>
    <add key="HtmlColorAttributeValues" value="blue"/>
    <add key="HtmlColorAspCodeTags" value="yellow"/>
    <add key="HtmlColorAspCode" value="gray"/>
    <add key="HtmlColorScriptCode" value="steelblue"/>
    <add key="HtmlColorText" value="teal"/>
    <!-- end VwdCms.CodeViewer Settings-->
</appSettings>

Step 3: Create a VwdCms:CodeViewer in your web form / aspx page:

    <VwdCms:CodeViewer runat="server" CodeSource="Text" 
    CodeLanguage="Html" CodeIsHtmlEncoded="false" 
    CssClass="codeviewer">
        <h2>This is a Sample H2 Element</h2>
    </VwdCms:CodeViewer>

Step 4: Set the Properties of the VwdCms.CodeViewer Server Control:

Tell the VwdCms.CodeViewer where the Text (code to be displayed) is coming from, a File or the Text property.

    public enum CodeSources
    {
        File,
        Text
    }

Tell the VwdCms.CodeViewer what language the code sample is written in.

    public enum CodeLanguages
    {
        Html,
        CSharp
    }

CodeSource property:

Use the CodeSource property to tell the CodeViewer if the sample code to be rendered will come from a file or is stored in the Text property.

CodeLanguage property:

When you set the CodeFile property, the VwdCms.CodeViewer automatically detects the language of the code sample based on the file extension and the settings in the Web.config file (see above).
Set CodeLanguage to 'Html' for HTML, XML, and ASPX code formats
Set CodeLanguage to 'CSharp' for C# and JavaScript code formats

Text property:

Use the Text property when you want to programmatically set the text/code that that you want to display. When creating a CodeViewer control inside an .aspx page, the Text is placed between the start tag and end tag of the control.

CodeIsHtmlEncoded property:

Use the CodeIsHtmlEncoded property to tell the CodeViewer whether or not you have HTML encode the Text. If you want to use the CodeViewer to display ASPX code that contains runat="server" attributes, you will need to HTML encode the Text inside the CodeViewer to prevent ASP.NET from trying to parse and render the sample code.

CodeFile property:

Use the CodeFile property when you want to display the code from a file on your web server. CodeFile is a local file path, like 'C:\Inetpub\wwwroot\AspNetSite\CodeSamples\Utilities.cs'. If you have a virtual path in a variable named 'vpCodeFile', you can use HttpContext.Current.Server.MapPath(vpCodeFile) to get the local path for the code file that you want to display.

If you want to display C# code files on your pages, but you don't want them to be part of your application (you don't want ASP.NET to compile these sample files) you can add a '.exclude' to the end of the file name. When you set the CodeFile property to a file with a '.exclude' extension, the CodeViewer will still be able to determine the code language based on the code file extension.

ShowCodeFileHeader property:

When you set the CodeFile property, you can also set the ShowCodeFileHeader to display a banner above the CodeViewer with the name of the sample code file. When you set the CodeFile property to a file with a '.exclude' extension, the CodeViewer will remove the '.exclude' when rendering the File Header banner.

Using CSS Styles & Classes withVwdCms.CodeViewer

The VwdCms.CodeViewer examples on this site use the following cascading style sheet class:

.codeviewer
{
	width:725px;
	margin:0px;
	padding:3px;
	border:solid 1px silver;
	text-align:left;
	background-color:#fcfcfc;
	font-family:verdana;
	font-size:10pt;
	overflow-x:auto;
}

Points of Interest

The key to building the VwdCms.CodeViewer was having good HTML and C# parsing algorithms that provide enough information about the parsed code so that I could determine what type of language element each peice of text is and then apply the appropriate coloring to it.

Creating the VwdCms.Html parsing library and the C# parsing algorithm was challenging because I am not really a Regular Expressions guru. I must say that my knowledge and ability to work with complex regular expressions has significantly improved as a result of this project.

Regular expressions are incredibly powerful especially when parsing code, but they are equally confusing and very delicate and picky (the slightest change to a regex query can make the whole program stop working).

The order in which the regex queries are executed is critical, so when parsing code you will really need to fully understand the syntax of the language and all of the variations in order to be able to parse code effectively.

Over the years I have written several code generators for various languages and I felt in order to generate code, you really needed to understand the language. I have now learned that the required level of understanding of the language for writing a parser is far greater than that required for generating code. I'm a fairly experienced C# programmer, but I would not claim to know everything there is to know about C#. Occasionally when I render a C# code sample with the VwdCms.CodeViewer, I see that I have overlooked an aspect of the C# syntax or code format. If you find code samples that do not colorize properly, please send them to me so I can investigate the problem.

If you find bugs in the VwdCms.CodeViewer, they are most likely bugs in the Html or C# parsing algorithms. If you are brave, then jump into the parsing code and see if you can fix it, but be sure to backup the original code first because it is very easy to make a mistake when working with regular expressions and the problems can be so subtle that you can stare at the code forever and not see it!

Let Other People Know About the VwdCms.CodeViewer

If you like the VwdCms.CodeViewer, then let others know about it too by linking to this article.

In the box below is some sample HTML code showing how you can link to this article. The output of this code is rendered directly below the box, see the green text with the hyperlink to this article.

<h3 style="width:495px;margin:2px auto 5px auto;
text-align:center;font-family:arial;font-size:0.8em;
font-weight:bold;color:darkgreen;padding:0px;">
This code sample has been automatically colorized by the 
<a href="http://www.vwd-cms.com/examples/CodeViewer/Article1.aspx" 
title="ASP.NET Code Colorizer Control by VWD-CMS">VwdCms.CodeViewer</a> 
control, an ASP.NET server control code colorizer that supports 
HTML, ASPX, XML, C#, and JavaScript code formats.
</h3>

Limitations of the Control

The VwdCms.CodeViewer operates on a code sample assuming that it only contains one language. This is not really true in many cases, for example, HTML and ASPX files often contain JavaScript or C# code within script blocks. At this time, I have not attempted to parse the code to such a detailed level to determine varying code languages within a single code sample. Maybe I will get around to this in the future, but for now, I am pleased with how the VwdCms.CodeViewer works most of the time and I feel that I can live with this minor limitation.

History

• Initial Release and Publication: July 1, 2007