Published: 07 Dec 2007
By: Paschal L

This article shows you how to convert source code to HTML.

Introduction

The aim of this article is to share with you something I found was really challenging for me to build. I had to include some code in different articles (including this one) and I wanted to get the code colorized and properly formatted.

I was amazed by the lack of information on HTML syntax coloring in VB.NET.

If you are a PERL programmer then you are lucky as you have the Code2HTML library. My PERL skills being very poor, I decided to write something for the .NET platform. This example can be used with .NET 2.0 and above.

The only change needed for .NET 1.1 will be to change the FileUpload control on the .aspx page with an Input File web control.

You can also use this article as a way to learn more about regular expressions.

How it works

The code is pretty much self-explanatory, but the idea behind it is something like this:

  • Set the language
  • Find the number of visible lines
  • For each visible line, color it

Supported languages

This tool currently supports the main .NET languages: VB.NET, C# and JavaScript. It can also colorize .aspx and HTML pages.

There is a method which can be used to set up the language automatically according to the file extension. You can also of course use a dropdown to select a language.

Extending the languages support

To extend the list of languages, you need to add a new constant in the Language class:

Now you have to write a function to define the list of keywords used by the language. A regular expression will then match those tags and add some HTML tags to colorize the lines.

Scripts embedded in an ASP.NET page

So what about the conversion of scripts languages in an .aspx page? Easy, a method is used to identify the script tag and the language used (see below), then the script lines are converted in the same way as a separate code file.

Rendering the code source

CodeToHtml is capable of converting your code source from a file or from a string. A series of overload methods provide all the means for that.

For the File option, one method let's you pass a Filepath then render the file to the page. The other overload method writes the converted file to disk using an output path (on the server).

Code

Now it's time to see the full code (VB.NET). The C# equivalent can be done easily from this source.

The example included here uses a FileUpload web control and a simple button to convert the selected file and return it through a Literal control.

For the purpose of this article, I have kept all the code in one place, but you can also create a separate class if you need too. Because the source code is converted in HTML, it should not interfere with anything on the web page, but just in case I use a <pre> tag to clearly identify the result.

When you click the button a click event is raised, the language property is set up according to the file extension. Then the file is read and the render method is called up on the string.

Listing 1: Full listing Default.aspx

Listing 2: Full listing Default.aspx.vb

Summary

You've now learned how to convert and colorize a code source to HTML. Following the guidelines in this article, you might also look at extending the languages list or why not add more new keywords for C# 3.0 and above. I would be interested to know about any developments you can add from this example.

The generated HTML files can then be used for:

  • Printing with a browser: contrary to most browsers, java is known to have a very bad and buggy printing support
  • Documentation: syntax highlighted code always looks better
  • Web publication
<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Paschal L

I am a developer at heart, working in the industry since well now over 28 years (yes I know I started quite young with some cobol stuff). I am the founder of an Irish user group, dedicated to the developers, and also founder of www.developers.ie I was honoured this year with two nominations by two ...

View complete profile here.

Other articles in this category


Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
jQuery Mobile ListView
In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
Exception Handling and .Net (A practical approach)
Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
JQuery Mobile Widgets Overview
An overview of widgets in jQuery Mobile.
Book Review: SignalR: Real-time Application Development
A book review of SignalR by Simone.
Top
 
 
 

Discussion


Subject Author Date
placeholder Good but Lack of Extensibility Kazi Manzur Rashid 12/13/2007 2:54 AM
Cool Overvie Liming Xu 1/14/2008 2:39 PM

Please login to rate or to leave a comment.