Codemirror – javascript syntax highlighting

CodeMirror is an on the fly syntax highlighting engine, written in Javascript. Like CodePress (the syntax highlighter used in the latest version of wordpress for editing plugins), it can highlight many different languages (PHP, JS, HTML, CSS to name a few). This tutorial will show you how to implement CodeMirror on your site, there is a great article written by the author of this library here on how it works under the hood.

Installation

Download the latest version from the CodeMirror website. As of today, it is version 0.62. After you unzip it you will see 3 directories – js, css and contrib. contrib holds parsers that other people have written such as the lua, python and PHP. css holds the color schemes for syntax highlighting and js contains the necessary scripts for CodeMirror to run.

Basic Usage

If we have a textarea with an id of code that we wanted to turn into a CodeMirror editor with a MirrorFrame(more on this later) then we would use the code below. Note that we need to specify where the parserfiles and stylesheets for the particular type of syntax (in this case javascript) are located.

  var textarea = document.getElementById('code');
  var editor = new MirrorFrame(CodeMirror.replace(textarea), {
    height: "350px",
    content: textarea.value,
    parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
    stylesheet: "css/jscolors.css",
    path: "js/",
    autoMatchParens: true
  });

The result would be:

MirrorFrame

The MirrorFrame class extends the syntax highlighter and makes the editor feel more of a true editor – with a toolbar/buttons. You can find the source of the MirrorFrame implementation in js/mirrorframe.js. As an example we’ll take the ‘get current line number’ function. It references this which in our case is the current editor. There are alot of functions CodeMirror makes available (list here), you can write your own functions and attach them to a button in your own MirrorFrame editor.

  line: function() {
    alert("The cursor is currently at line " + this.mirror.currentLine());
    this.mirror.focus();
  },

CodeMirror

We can pass many configuration options to the CodeMirror class when we instantiate it such as whether we want line numbering and the size of tab width. An example below:

editor = CodeMirror.fromTextArea(textarea, {
content: textarea.value,
parserfile: ["parser/tokenizejavascript.js", "parser/parsejavascript.js"],
stylesheet: "css/editor_colours/jscolours.css",
path: "js/",
autoMatchParens: true,
width: '100%',
height: '100%',
textWrapping: false,
lineNumbers: true,
tabMode: 'spaces',
iframeClass: 'ifc',
indentUnit: 4
});

There are also 2 events available for the developer to use. onChange and initCallBack. initCallBack is called when the editor has loaded and is ready for the user to start entering code (remember an iframe is created, additional javascript files are loaded). onChange occurs whenever a change is made in the editor itself. If we wanted to build an on-the-fly code tester, and needed to fetch the code from the editor whenever the code in the editor changed, then we would do the following:

  var editor = CodeMirror.fromTextArea(textarea, {
    height: "350px",
    content: textarea.value,
    parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
    stylesheet: "css/jscolors.css",
    path: "js/",
    autoMatchParens: true,
    onChange: function (n) { alert(editor.getCode()); },
  });

This was just a quick look at CodeMirror, but hopefully you can appreciate just how powerful it is. It could be used in your website’s admin interface to alter code on the fly, or be used in Titanium or AIR to create a desktop IDE in HTML/Javascript.