COLOURcode

Code Editors - two of the best JavaScript code editors available

Summary of features

COLOURcode integrates two popular in-browser code editors: Ace and CodeMirror. Ace is maintained as the primary editor for Cloud9 IDE and powers GitHub, Mozilla Add-On Builder, and a lot more. CodeMirror is the editor used in the dev tools for both Firefox and Chrome, Light Table, Adobe Brackets, Bitbucket, and many other projects.

At a glance

  • Ace supports over 110 languages and has over 20 themes.
  • CodeMirror supports over 100 languages and has over 45 themes.
  • Both editors are highly configurable, capable and extendible.

Ace, JS (using the 'monokai' theme)

/**
* You are looking at ACE right now. Go ahead and play with it!
* ACE has support for 45 language modes and 24 color themes!
*/
 
function add(x, y) {
    var resultString = "The result of your sum is: ";
    var result = x + y;
    return resultString + result;
}
var addResult = add(3, 2);
console.log(addResult);

Ace, CSS (using the 'clouds' theme)

/* You are looking at ACE right now. Go ahead and play with it! */
 
#idname, .classname {
    position: note-the-warning;
}
#idname:after, .classname:after {
    position: absolute;
    top: 7px;
    left: 10px;
    content: "\f058";
    font-family: FontAwesome;
    font-size: 40px;
    line-height: 1em;
}

Ace, HTML, readonly (using the default theme)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title of the document</title>
    </head>
    <body>
        <!-- You are looking at ACE right now, in 'readonly' mode -->
        <h1>Hello World!</h1>
        <p> Unclosed tag (note the two errors in the margin)
        <img src="smiley.gif" alt="Smiley face" height="42" width="42">
    </body>
</html>

CodeMirror, JS (using the 'the-matrix' theme)


              

            

            

              

                
CodeMirror, CSS (using the 'neat' theme)

              

              

                

              

            

            

              

                
CodeMirror, HTML, readonly (using the default theme)