• Download source - 875.99 KB
• Download demo - 100.07 KB
• Download help (CHM) - 119.27 KB

Introduction

For one of my projects I have felt the need of a text editor with syntax highlighting. At first I used a component inherited from RichTextBoх, but while using it for a large amount of text I found out that RichTextBoх highlights very slowly a large number of colored fragments (from 200 and more). When such highlighting has to be made in a dynamic way, it causes a serious problem.

Therefore I created my own text component which uses neither Windows TextBox nor RichTextBoх.

The rendering of a text was made completely only by the means of GDI+.

The component works fast enough with a large amount of text and also possesses tools to make comfortably dynamic syntax highlighting.

It has such settings as foreground color, font style, background color which can be adjusted for arbitrarily selected text symbols. One can easily gain access to a text with the use of regular expressions. WordWrap, Find/Replace, Code folding and multilevel Undo/Redo are supported as well.

Implementation

For storage of characters of text, structure Char is used:

    public struct Char
    {
        public char c;
        public StyleIndex style;
    }

The structure keeps the symbol (char, 2 bytes) and style index mask (StyleIndex, 2 bytes). Thus, on each character of text consumes 4 bytes of memory. Symbols are grouped into lines, which are implemented using List<Char>.

StyleIndex is mask of styles indices, applied to this character. Each bit of StyleIndex means that this symbol will be drawn by appropriate style. Because StyleIndex has 16 bits, control supports no more than 16 different styles.

Styles are stored in a separate list:

public readonly Style[] Styles = new Style[sizeof(ushort)*8];

In fact, Style is renderer of chars, backgrounds, borders and other design elements of the text.
Below is a typical implementation of one of the styles for rendering text characters:

    public class TextStyle : Style
    {
        public Brush ForeBrush { get; set; }
        public Brush BackgroundBrush { get; set; }
        public FontStyle FontStyle { get; set; }

        public override void Draw(Graphics gr, Point position, Range range)
        {
            //draw background
            if (BackgroundBrush != null)
                gr.FillRectangle(BackgroundBrush, position.X, position.Y, (range.End.iChar - 

range.Start.iChar) * range.tb.CharWidth, range.tb.CharHeight);
            //draw chars
            Font f = new Font(range.tb.Font, FontStyle);
            Line line = range.tb[range.Start.iLine];
            float dx = range.tb.CharWidth;
            float y = position.Y - 2f;
            float x = position.X - 2f;

            Brush foreBrush = this.ForeBrush ?? new SolidBrush(range.tb.ForeColor);

            for (int i = range.Start.iChar; i < range.End.iChar; i++)
            {
                //draw char
                gr.DrawString(line[i].c.ToString(), f, foreBrush, x, y);
                x += dx;
            }
        }
    }

TextStyle contains foreground color, background color and font style of the text. When creating a new style, component checks style on its list, and if there is no style, it creates a new style, with its index.

You can create custom styles, inherited from Style class.

To work with fragments of text, was used the class Range, representing a continuous block of text, given the initial and final positions:

public class Range
{
    Place start;
    Place end;
}
public struct Place
{
    int iLine;
    int iChar;
}

Using the code

Syntax highlighting

Unlike RichTextBoх, the component does not use RTF. The information about the color and type of symbols is kept only in the component. It means that the coloring of the component has to be redone every time when entering text. In this case the event TextChanged is applied.

A Range object which contains the information about modified text range pass into the event TextChanged. It permits the highlighting of the altered text fragment only.

For the search of fragments of text which need to be colored, it is possible to employ overloaded method Range.SetStyle() which accepts search pattern (regular expression). For example, the following code can be used for the search and coloring of the comments of C# code (the part of the line starting from two forward slashes):

Style GreenStyle = new TextStyle(Brushes.Green, null, FontStyle.Italic);
...
private void fastColoredTextBox1_TextChanged(object sender, TextChangedEventArgs e)
{
    //clear style of changed range
    e.ChangedRange.ClearStyle(GreenStyle);
    //comment highlighting
    e.ChangedRange.SetStyle(GreenStyle, @"//.*$", RegexOptions.Multiline);
} 

Before beginning the coloring call the method Range.ClearStyle() is used to clean out and delete the previous style.

The method SetStyle() highlights the text fragment corresponding to a regular expression. However, if the expression includes the named group "range", the group with a name "range" is highlighted. The name of the class which comes after the key words "class", "struct" and "enum" was bolded in the following example:

e.ChangedRange.SetStyle(BoldStyle, @"\b(class|struct|enum)\s+(?<range>[\w_]+?)\b");

The event handler TextChanged utilized for coloring C#, VB, HTML and other languages syntax was implemented in demo application.

Apart from the event TextChanged the events TextChanging, VisibleRangeChanged and SelectionChanged may happen to be useful. The event TextChanging appears before the text starts to be modified. The event SelectionChanged occurs after the change of the cursor position in the component or while a selected fragment of text is being modified.

Code folding

Control allows to hide blocks of text. To hide the selected text, use method CollapseBlock():

 fastColoredTextBox1.CollapseBlock(fastColoredTextBox1.Selection.Start.iLine, 
                fastColoredTextBox1.Selection.End.iLine);

The result is shown in the picture:

The component supports automatic search for fragments of collapse (folding area). To set the pattern (Regex) to find the beginning and end of folding block, use method Range.SetFoldingMarkers() in TextChanged handler.

For example, to search of blocks {..} and #region .. #endregion, use next handler:

private void fastColoredTextBox1_TextChanged(object sender, TextChangedEventArgs e)
{
    //clear folding markers of changed range
    e.ChangedRange.ClearFoldingMarkers();
    //set folding markers
    e.ChangedRange.SetFoldingMarkers("{", "}");
    e.ChangedRange.SetFoldingMarkers(@"#region\b", @"#endregion\b");
}

The result is shown in the picture:

Folding blocks can be nested into each other.

Collapsed block can be opened by doubleclick on it, or click on marker '+'. Single click on folded area selects hidden block. Also, you can open hidden block programmatically by ExpandBlock() method.

Demo application contains sample for collapse all #region...#endregion blocks of the text.

In addition to hiding the text, folding blocks help visually define the boundaries of the block where the caret is located. For this purpose, the left side of the control draws a vertical line (folding indicator). It shows the beginning and end of the current folding block, in which the caret is located.

Delayed handlers

Many events (TextChanged, SelectionChanged, VisibleRangeChanged) have a pending version of the event. A deferred event is triggered after a certain time after the occurrence of major events.

What does this mean? If the user enters text quickly, then the TextChanged is triggered when you enter each character. And event TextChangedDelayed work only after the user has stopped typing. And only once.

It is useful for lazy highlighting of large text.

Control supports next delayed events: TextChangedDelayed, SelectionChangedDelayed, VisibleRangeChangedDelayed. Properties DelayedEventsInterval and DelayedTextChangedInterval contain time of pending.

Export to HTML

Control has property Html. It returns HTML version of colored text. Also you can use ExportToHTML class for more flexibility of export to HTML. You can use export to HTML for printing of the text, or for coloring of the code of your web-site.

Clipboard

Control copies the text in two formats - Plain text and HTML.
If the target application supports inserting HTML (e.g. MS Word) then will be inserted colored text. Otherwise (such as Notepad) will be inserted plain text.

Hotkeys

Control supports next hotkeys:
Left, Right, Up, Down, Home, End, PageUp, PageDown - moves caret
Shift+(Left, Right, Up, Down, Home, End, PageUp, PageDown) - moves caret with selection
Ctrl+F, Ctrl+H - shows Find and Replace dialogs
Ctrl+(C, V, X) - standard clipboard operations
Ctrl+A - selects all text
Ctrl+Z, Alt+Backspace, Ctrl+R - Undo/Redo opertions
Tab, Shift+Tab - increase/decrease left indent of selected range
Ctrl+Home, Ctrl+End - go to first/last char of the text
Shift+Ctrl+Home, Shift+Ctrl+End - go to first/last char of the text with selection
Ctrl+Left, Ctrl+Right - go word left/right
Shift+Ctrl+Left, Shift+Ctrl+Right - go word left/right with selection
Ctrl+-, Shift+Ctrl+- - backward/forward navigation
Ctrl+-, Shift+Ctrl+- - backward/forward navigation
Ctrl+U - converts selected text to upper/lower case
Ctrl+Shift+C - inserts/removes comment prefix in selected lines

Brackets highlighting

Control has built-in brackets highlighting. Simply set properties LeftBracket and RightBracket. If you want disable brackets highlighting, set it to '\x0'. For adjust color of highlighting, use property BracketsStyle. For adjusting of time of pending of highlighting, change DelayedEventsInterval.

Interactive styles

You can create own intercative(clickable) styles. To do this, derive your class from the Style, and call AddVisualMarker() from your overrided Draw() method. To handle a click on the marker, use eventsFastColoredTextBox.VisualMarkerClick or Style.VisualMarkerClick or override method Style.OnVisualMarkerClick().
Also you can use built-in style ShortcutStyle. This class draws little clickable rectangle under last char of range.

Styles priority

Each char can contain up to 16 different styles. Therefore, the matter in which order these styles will be drawn. To explicitly specify the order of drawing, use the method FastColoredTextBox.AddStyle():

fastColoredTextBox1.AddStyle(MyUndermostStyle);
fastColoredTextBox1.AddStyle(MyUpperStyle);
fastColoredTextBox1.AddStyle(MyTopmostStyle);

This methods must be called before any calls of Range.SetStyle(). Otherwise, the draw order will be determined by the order of calls of methods Range.SetStyle().

Note: by default, control draws only one TextStyle(or inherited) style - undermost from all. However, you can enable the drawing of the symbol in many TextStyle, using the property FastColoredTextBox.AllowSeveralTextStyleDrawing. This applies only to TextStyle(or inherited) styles, other styles(inherited from Style) are drawn in any case.

If char has not any TextStyle, it will drawing by FastColoredTextBox.DefaultStyle. DefaultStyle draws over all other styles.

Call method ClearStyleBuffer() if you need reset order of drawing.

Also, to adjust the look of of text, you can apply a semitransparent color in your styles.

Built-in highlighter

FastColoredTextBox has built-in syntax highlighter for languages: C#, VB, HTML, SQL, PHP.
Note: You can create own syntax highlighter for any language.

Using XML syntax descriptors

Component can use the XML file for syntax highlighting. File name specified in the property DescriptionFile.

For highlighting need to set the Language property to Custom.

The file may contain information about styles, rules of syntax highlighting, folding parameters and brackets.
Below is a list of valid tags and attributes to them:

• <doc>...</doc> - root XML node.
• <brackets left="..." right="..." /> - sets the brackets for highlighting
• <style name="..." color="..." backColor="..." fontStyle="..." /> - sets the style called name. Tag <style> creates only styles of type TextStyle. color and backColor determine foreground and background color. Allowed as a string color name or hex representation of the form #RGB or #ARGB. fontStyle - enumeration of FontStyle parameters.
  The sequence tags <style> determines the order of rendering these styles.
• <rule style="..." options="...">regex pattern</rule> - sets rule of highlighting. style - style name described in the tags <style>. options - enumeration of RegexOptions parameters. The contents of the tag - regex pattern for highlighting.
• <folding start="..." finish="..." options="..."> - specifies the rules for folding. start and finish set regular expressions to the beginning and end of the block. options - enumeration of RegexOptions parameters.

Below is an example XML file for syntax highlighting HTML:

<doc>
    <brackets left="&lt;" right="&gt;" />
    <style name="Maroon" color="Maroon" fontStyle="Bold,Italic" />
    <style name="Blue" color="Blue"/>
    <style name="Red" color="Red" backColor="#f5f5e5" />
    <rule style="Blue">&lt;|/&gt;|&lt;/|&gt;</rule>
    <rule style="Maroon">&lt;(?&lt;range&gt;[!\w\d]+)</rule>
    <rule style="Maroon">&lt;/(?&lt;range&gt;[\w\d]+)&gt;</rule>
    <rule style="Red" options="Multiline">(?&lt;range&gt;\S+?)='[^']*'|(?&lt;range&gt;\S+)="[^"]*"|(?&lt;range&gt;\S+)=\S+</rule>
    <folding start="&lt;div" finish="&lt;/div&gt;" options="IgnoreCase"/>
</doc>

Backward/Forward Navigation

Control remembers lines in which the user has visited. You can return to the previous location by pressing [Ctrl + -] or call NavigateBackward(). Similarly, [Ctrl + Shift + -] and the method NavigateForward().
You can also use the property Line.LastVisit for information on the last visit to this line. In the example PowerfulCSharpEditor this property is used for navigation in multitab mode, when you have multiple documents open.

Hieroglyphs and wide characters

Control supports input and display hieroglyphs and other wide characters (CJK languages, Arabic and other). Also Input Method Editor (IME) is supported.
To enable this feature to switch the property ImeMode to the state On.
Demo contains sample of IME features usage.
Note: For a normal display wide characters ​​may require a larger font size.
Note: Enabled IME mode can decrease performance of control.

Samples

Demo application has many samples. Below is a brief description:

• Powerful sample. Contains many features: syntax highlighting, code folding, autocomplete, export, same words highlighting and other.
• PowerfulCSharpEditor.Powerfull multitab C# source files editor. Supports highlighting, multitab backward/forward navigation, dynamic methods list and other.
• Simplest syntax highlighting sample. Shows how to make simplest syntax highlighting.
• Marker sample. Shows how to make marker tool. Sample uses class ShortcutStyle for create clickable markers on text area:
  

  

• Custom style sample. This example shows how to create own custom style. Next custom style draws frame around of the words:

      class EllipseStyle : Style
      {
          public override void Draw(Graphics gr, Point position, Range range)
          {
              //get size of rectangle
              Size size = GetSizeOfRange(range);
              //create rectangle
              Rectangle rect = new Rectangle(position, size);
              //inflate it
              rect.Inflate(2, 2);
              //get rounded rectangle
              var path = GetRoundedRectangle(rect, 7);
              //draw rounded rectangle
              gr.DrawPath(Pens.Red, path);
          }
      }
  

  
  
• VisibleRangeChangedDelayed usage sample. This example shows how to highlight syntax for extremally large text by VisibleRangeChangedDelayed event.
• Simplest code folding sample. This example shows how to make simplest code folding.
• Autocomplete sample. This example shows how to create autocomplete functionality. Also implemented highlighting of same words:
  
  
  
  
• Dynamic highlighting sample. Shows how to make dinamic syntax highlighting. This example finds the functions declared in the program and dynamically highlights all of their entry into the code of LISP.
• Syntax highlighting by Xml Description. This example uses XML file for description syntax highlighting.
• IMEmode sample.This example supports IME entering mode and rendering of wide characters.
  
• Image drawing sample. Sample shows how to draw images instead text:
  
  
• Joke sample :) Some additional features. Implemented custom TextStyle:
  
  

Performance

For storing one megabyte of text requires approximately 6 MB of RAM (include undo/redo stack objects). The coloring does not consume significant resources.

The use of regular expressions and saving memory usage, allow reach high performance component. I tested the file of 50,000 lines (about 1.6 MB) of C# code. The total time of insertion, and the syntax coloring was about 3 seconds. Further work with the text passed without significant delays.

Restrictions

The component does not support center or right alignment, automatical Drag&Drop and uses only monospaced fonts.

History

• 26 Feb 2011 - Added Find/Replace functionality, indent stuffs, showing of line numbers. Also added VB syntax highlighting.
• 28 Feb 2011 - Added code folding functionality (include current block highlighting). Added some features (caret blinking, increase/decrease indent of selected text). Optimized ReplaceAll functionality. Added HTML syntax highlighting. Increased general performance of control.
• 2 Mar 2011 - Style logic was revised. Added Html export. Added many samples. Added many, many features... :)
• 3 Mar 2011 - Increased performance. Fixed some bugs. Added SQL, PHP syntax highlighting examples. Brackets highlighting is built-in now. Some hotkeys was added.
• 4 Mar 2011 - FastColoredTextBox now supports built-in syntax highlighter for languages: C#, VB, HTML, SQL, PHP.
• 8 Mar 2011 - Added XML syntax descriptors. Fixed some bugs of font rendering.
• 14 Mar 2011 - Added Backward/Forward navigation. Added IME mode and CJK languages support. Added powerfull C# multitab editor sample.
• 25 Mar 2011 - Added next features: colored text copy, auto indent for new line, insert/remove comment prefix for selected lines, uppercase/lowercase transformation of selected text. Fixed scroll flicker. Fixed some bugs. Added image drawing sample.