Try Now

Format Code Control

by Gabe Sumner
Publication date:
Sep 1, 2009, 12:19 PM


  • Sitefinity 3.5

Price: $ 0

Posting code samples on web pages is not easy.  Much of the nice formatting that makes code readable gets completely lost when you toss it into HTML.  What you end up with looks like modem line noise.

To combat this, I wanted to create a Sitefinity control that would easily allow me to post nicely formatted code samples to my web pages.  This ended up becoming a fairly complex project. 

First a bit about Sitefinity Control Designers.

This control uses a Sitefinity Control Designer to create a user friendly interface for updating the control.  If you want to understand ControlDesigners, then you should probably take a look at:

  • "The Sitefinity Developer's Manual" that comes with Sitefinity.
  • This thread on the Sitefinity Forums.

ControlDesigners aren't the easiest thing to get your head around.  To implement them, in conjuction with User Controls, you are looking at about 5 different files.  Here is a brief overview:

  • The UserControl - in this case this would be my FormatCode.ascx file and its associated FormatCode.cs codebehind file. This is the actual user control that gets dragged & dropped onto a Sitefinity page. 
  • The Base Class for the UserControl - the UserControl has to inherit from this class. This class is stored in the "App_Code" folder.  It gets compiled, referenced, and inherited.
  • The Control Designer - this is where all the Control Designer work gets done. It handles presetting the fields and saving the properties.
  • The Control Designer Template - this is the template that contains the HTML and ASP.NET controls used for displaying the Control Designer.
  • The Control Designer Stylesheets - don't underestimate this thing.  By the time you get started you have many layers of Sitefinity stylesheets being applied to you.

How does Format Code work?

I have to give credit to Jean-Claude Manoli for creating the code that handles creating the HTML to display the nice formatted code.  You can get more information at the following link:  http://manoli.net/csharpformat/   Everything I have done here simply involves wrapping this CSharpFormat class.