Click here to Skip to main content
13,398,889 members (35,722 online)
Click here to Skip to main content
Add your own
alternative version


24 bookmarked
Posted 9 Jul 2010

Syntax Hightlighting Editor

, 24 Mar 2012
Rate this:
Please Sign up or sign in to vote.
Syntax highlighting editor in flash for couples of programming languages!


I was looking for some online code editor which supports syntax-highlighting so that it could be embedded into my CMS project. After I tried several existing ones, I found none that satisfied me. I decided to build one, and here it is.





  • This editor is written in AS3/Flash Builder 4, it is compatible with any browser which has a Flash player.
  • Supports real-time highlights when you are typing.
  • Extended support for languages you want. Currently, it supports C#/CSS/JS/VBS/HTML/XML.
  • Supports multi-languages in one document. Usually, we have CSS/JS/C#/VB code in a single ASP.NET page, this editor can highlight each section with the corresponding styles.
  • Supports tab key for selected paragraph indentation.
  • Supports interaction with JavaScript, the editor exposes friendly interfaces.

How to Use

To embed this editor to your page, the first step is to load this editor to your page correctly. It is strongly recommended to load the editor via swfobject.

<script language="javascript" type="text/javascript">
// initialize with parameters
var flashvars = {
    // indicate the parser, aspx / csharp /
    //       javascript / css / vbscript / html / xml
    parser: "aspx",
    // set the editor to read-only mode
    readOnly: false,    

    // the editor detects client installed fonts
    // and use preferred fonts if installed.
    // NOTE: the charactor '|' is required at the begin and end of the list
    preferredFonts : 
      "|Fixedsys|Fixedsys Excelsior 3.01|Fixedsys 
       Excelsior 3.00|Courier New|Courier|",

    // indicate the callback function so that we
    // can load the content into editor once it is initialized.
    onload : function() {
        // call setText to load content into editor
                 document.getElementById('content').value );
        document.getElementById('content').style.display = 'none';

// flash player parameters, you can find more information
// at:
var params = { menu: "false", 
    wmode : "transparent", allowscriptaccess : "always" };

// define the id of the flash control, we need the id in javascript interaction 
var attributes = { id: "ctlFlash", name: "ctlFlash" };

// embed the flash with size, more information can be
// found at:
  "flashContent", "800", "600", 
  "10.0.0", null, flashvars, params, attributes);

The sample code above demonstrates how to load the editor with parameters:

  • parser indicates the parser; the parser name can be aspx / csharp / javascript / css / vbscript / html / xml / jsp / php / sql / cpp / java.
  • readOnly indicates if read-only mode is enabled or not.
  • preferredFonts indicates a list of preferred fonts to be used in the editor. The editor detects client installed fonts, and uses the first font found in the list. The list items are separated by the character "|" , and must start and end with the "|" character.
  • onload indicates a callback function to be called when the editor is initialized. Usually, you can load the content into the editor and hide the real textarea in this function.


  • setParser(parseName:String): switch the parser dynamically
  • setReadOnly(readOnly:Boolean): enable/disable read-only mode
  • setText(content:String): set the content of the editor
  • getText(): get the content of the editor, usually used to retrieve the content before form submitting.


This article, along with any associated source code and files, is licensed under The MIT License


About the Author

Team Leader
China China
Jerry is from China. He was captivated by computer programming since 13 years old when first time played with Q-Basic.

  • Windows / Linux & C++
  • iOS & Obj-C
  • .Net & C#
  • Flex/Flash & ActionScript
  • HTML / CSS / Javascript
  • Gaming Server programming / video, audio processing / image & graphics

Contact: vcer(at)
Chinese Blog:

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
hyblusea24-Mar-12 19:03
memberhyblusea24-Mar-12 19:03 
GeneralRe: Save file back to directory after update Pin
Member 359855127-Apr-11 23:49
memberMember 359855127-Apr-11 23:49 
GeneralRe: Save file back to directory after update Pin
Jerry.Wang20-May-11 15:58
memberJerry.Wang20-May-11 15:58 
GeneralMy vote of 2 Pin
iBDev10-Jul-10 18:46
memberiBDev10-Jul-10 18:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180218.2 | Last Updated 24 Mar 2012
Article Copyright 2010 by Jerry.Wang
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid