Feb 02 2011

Guide: Write Your Own Syntax Highlighter

Category: .netJebarson Jebamony @ 10:09 am

Download (80.22 kb) your sample here

Syntax Highlighter has become the trivial part of every programmers life. Since “Oxford English Dictionary” which was published in the year 1985, we are addicted to these editors. In this post, I will walk you through a very simple and basic syntax highlighter application.

Our first goal is define a contract / type which will hold the details of our need. So let me create a type called HighlightInfo as below.

    /// <summary>
    /// Type for highlight info
    /// </summary>
    public class HighlightInfo : ObjectBase
    {
        /// <summary>
        /// Gets or sets the name.
        /// </summary>
        /// <value>The name.</value>
        public string Name { get; set; }

        /// <summary>
        /// Gets or sets the description.
        /// </summary>
        /// <value>The description.</value>
        public string Description { get; set; }

        /// <summary>
        /// Gets or sets the words.
        /// </summary>
        /// <value>The words.</value>
        public string Words { get; set; }

        /// <summary>
        /// Gets or sets the color of the fore.
        /// </summary>
        /// <value>The color of the fore.</value>
        [XmlIgnore]
        public Color ForeColor { get; set; }

        /// <summary>
        /// Gets or sets the color of the background.
        /// </summary>
        /// <value>The color of the background.</value>
        [XmlIgnore]
        public Color BackgroundColor { get; set; }

        [XmlElement("ForeColor")]
        public string HtmlForeColor
        {
            get
            {
                return ColorTranslator.ToHtml(this.ForeColor);
            }
            set
            {
                this.ForeColor = ColorTranslator.FromHtml(value);
            }
        }

        /// <summary>
        /// Gets or sets the color of the HTML background.
        /// </summary>
        /// <value>The color of the HTML background.</value>
        [XmlElement("BackgroundColor")]
        public string HtmlBackgroundColor
        {
            get
            {
                return ColorTranslator.ToHtml(this.BackgroundColor);
            }
            set
            {
                this.BackgroundColor = ColorTranslator.FromHtml(value);
            }
        }
    }

Each and every object of this type will represent single highlight setting. The color possess two properties for itself to avoid the issue that the Color is not serializable (For more info on the same do read the post “Workaround For Non Serializable Types“). The “Words” will be a comma seperated words to be highlighted. The list of such above mentioned type will encapsulate the entire settings.

When it comes to algorithms, you should be very careful about the performance since it might involve a massive data which will be involved in the process. One such algorithm can be searching for multiple strings on a single statement using regular expression. Check out “Search Multiple Strings Using Regular Expression“. Also in our sample, we make the highlighting on every text change for the entire text which should be converted to use only the changed text when it comes to huge text.

The highlighting on a “RTF text box” can be done as below

// Select and apply colors
this.Editor.SelectionStart = match.Index;
this.Editor.SelectionLength = match.Value.Length;
this.Editor.SelectionColor = info.ForeColor;
this.Editor.SelectionBackColor = info.BackgroundColor;

If you are looking for building a web application with this feature then ASP.net + Javascript or Javascript alone will be your better option. Since Javascript also supports regular expressions, you might not need to change most of the code.

Do note that this sample will serve as a guide for building your syntax highlighter and the logic and design might need the change as per the requirement.

Sample Screenshots

©Editor of syntax highlighter – Jebarson

 

©Settings of syntax highlighter – Jebarson

Now its time to build.

Download (80.22 kb) your sample here

Leave a Reply