Syntax Coloring in Editors

By Xah Lee. Date: . Last updated: .

Here's a comparison of 10 editors, on how they syntax color.

And, we also look at what are the possible way to design syntax coloring.

Emacs js-mode

It's curious, of the 2 JavaScript modes for emacs, none of them does coloring of much JavaScript builtin words or methods. In fact, none. They only color what's often technically called “keywords”, such as {if, for, var, null, function, return}. None of the hundreds of builtin method names, object names, etc.

syntax coloring emacs js-mode 2014-06-17
Syntax coloring of JavaScript in emacs js-mode, the default JavaScript mode.

Note the DOM methods {createElementNS, setAttribute, appendChild, createTextNode} are not colored. Worse, basic methods of objects {toString, push} are not colored. Even “length” is not.

Note, it does color some user defined variables. Look at x_increment, but only in the variable declaration, not elsewhere. What's the point then? (it does that because it's easy to implement, by just regex on var [A-Za-z]+ )

Emacs js2-mode

Now, let's look at js2-node by the well known top programer Steve Yegge. js2-node is one of the most advanced mode, it contains a complete JavaScript parser.

syntax coloring emacs js2-mode 2014-06-17
syntax coloring of JavaScript in emacs js2-mode

Interestingly, it colors function parameters. Excellent. But, only in the declaration. For example, it didn't color “φx_coord” in the body. And, like the default simple “js-mode”, it doesn't color any of the builtin methods such as “push” nor “length”.

Maybe emacs people don't like colors? Let's look at vim.

vim

syntax coloring vim 2014-06-17
syntax coloring of JavaScript in vim

The only thing new is that it colored the DOM object document, but not setAttribute or other. It's lousy like emacs.

Maybe emacs vim unix hacker types are outliers?

Let's look at GUI editor, Linux gedit.

gedit

syntax coloring gedit 2014-06-17
syntax coloring of JavaScript in gedit

Interesting. Indeed, it colored {toString, length, push}. These are most frequently used builtin methods/properties of the JavaScript language. It still doesn't color DOM things, such as {appendChild, setAttribute, createElementNS}.

[see DOM Scripting Tutorial]

as a side note, its coloring is a bit strange. It colors "string" the same color as the builtin constant undefined. Yet the builtin constant “null” is not colored at all. It colors keyword {function, if, return, var} the same way as object property length. I smell sloppiness.

Atom Editor

syntax coloring atom 2015-06-29
syntax coloring in Atom editor.

Overall, it shows no deeper syntax understanding than emacs and vim.

Now let's look at commercial editors.

Sublime Text

syntax coloring sublime text 2015-06-26
Syntax coloring in Sublime Text editor

Sublime Text's syntax coloring seems a mixed bag.

Overall, it shows no deeper syntax understanding than emacs and vim.

Microsoft Visual Studio

syntax coloring Visual Studio 2015-06-25 89585
syntax coloring in Visual Studio.

Microsoft Visual Studio doesn't color much, same as emacs and vim.

Firefox

syntax coloring firefox 2015-06-24
Firefox browser console. [see JavaScript: Use Browser's JS Console]

in Firefox browser JavaScript console:

WebStorm

Now let's look at the professional WebStorm IDE.

syntax coloring WebStorm 2015-06-24
Syntax coloring in WebStorm IDE

in WebStorm:

So, it seems, WebStorm is the most technically capable.

The Ontology of Syntax Coloring

What are the possible schemes of syntax coloring? and which would be useful to most programers?

Color by Nesting Level

One way, recently suggested by the well-known JSON inventor Douglas Crockford that's making the rounds in the web is coloring by how deep it is nested. see:

Douglas Crockford syntax coloring nested 2011-11 5bbc3
Douglas Crockford syntax coloring nested 2011-11. https://plus.google.com/+DouglasCrockfordEsq/posts/XXkzgJEoE9v
Douglas Crockford syntax coloring nested 2013-02 46c79
Douglas Crockford syntax coloring nested 2013-02 https://plus.google.com/+DouglasCrockfordEsq/posts/FzKnHk96m2C

Color by Word Classification

another way, the way i want, is to color by the language's technical classification of the words. For example, different colors for {type, class, object, function, method, variable, …}. The detail depends on the language.

In this way, you get to know at a glance how the code is using the language. This scheme is especially useful for a language new to you. (say, Haskell, Erlang, fsharp, Wolfram Language, Golang, Rust, etc.)

syntax coloring emacs xah-js-mode 2014-06-17
syntax coloring of JavaScript in emacs xah-js-mode

Note, all JavaScript buildin words e.g. {toString, length, push}, and DOM words e.g. {appendChild, setAttribute, createElementNS}, are all colored, and differently.

Here's a example for emacs lisp the language.

screenshot xah elisp mode 2017 01 03
xah-elisp-mode

[see Emacs: Xah Emacs Lisp Mode]

Here, core lisp language words are colored by their technical classification: special form, function, command.

Compare it to default emacs lisp mode:

screenshot emacs lisp mode 2017 01 03
emacs-lisp-mode

Color User Defined Identifiers Only

Another way, is to color by user-oriented purpose. Mathematica is somewhat like this, it seems to only color parameters and variables, and does that well.

Mathematica syntax StandardForm screenshot
Wolfram Language in Mathematica
Mathematica reverse list-2-2
Wolfram Language in Mathematica

Color by Type

Another way, is to color by type. This might be suitable for Haskell, OCaml.

Code for Screenshot

Show screenshots of your fav editor. Here's the code snippet.

var xd = {

    draw_text: function (φx_coord, φy_coord, φtext, φstyle) {
        // returns a svg text element
        var text_elm = document.createElementNS("http://www.w3.org/2000/svg", "text");
        text_elm.setAttribute("x", φx_coord.toString());
        text_elm.setAttribute("y", φy_coord.toString());
        if ( φstyle !== null && φstyle !== undefined) { text_elm.setAttribute("style", φstyle); }
        text_elm.appendChild(document.createTextNode(φtext));
        return text_elm;
    },

    draw_horizontal_labels: function (φx_min, φx_max, φyCoord, φtext_array) {
        // returns a array of text elements
        var x_increment = (φx_max - φx_min) / (φtext_array.length -1);
        var result = [];

        for (var i = 0; i <= φtext_array.length; i++) {
            var xCoord = φx_min + i * x_increment;
            var text = xd.draw_text(xCoord, φyCoord , φtext_array[i]);
            text.setAttribute("style", "fill:black; stroke:silver");
            result.push(text);
        }
        return result;
    }
};
Patreon me $5 patreon

Or Buy Xah Emacs Tutorial

Or buy a nice keyboard: Best Keyboard for Emacs

If you have a question, put $5 at patreon and message me.