Syntax Coloring in Editors

By Xah Lee. Date: . Last updated: .

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 {for, while, var, null, function}, maybe 30 of them or such. None of the hundreds of builtin method names, object names, etc.

Emacs js-mode

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 there. However, only when the variable is declared, not elsewhere. What's the point then? (it does that because it's trivial to implement: just regex on var identifier_chars)

now, let's look at js2-node by the accomplished programer Steve Yegge. js2-node is one of the most advanced mode, it contains a complete JavaScript parser:

Emacs js2-mode

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 emacsers don't like color much. 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. Otherwise, it's the same as default emacs js-mode.

Maybe the emacs and 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. It indeed, 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 Xah JavaScript Tutorial by Example]

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.

Commercial Editors

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 to be 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.

What Do You Want?

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

i want builtin language words colored, such as builtin {keyword, function, type, method, class, constant, variable}. And, they be in differet color. So, i can tell how the code is using the language. This is especially important for a language new to you. (such as, say, Haskell, Erlang, f#, Wolfram Language, Golang, Rust, …)

thus, i started to write my own emacs modes for each lang.

compare:

screenshot emacs-lisp-mode-2013-05-05
emacs-lisp-mode
screenshot xah-elisp-mode-2013-05-05
xah-elisp-mode

here, core lisp language words are colored in one way, and emacs related function in another way. Builtin variables are colored in another way. (that's the current scheme. Lots research and code yet to be done.)

The Ontology of Syntax Coloring

there are many ways to design syntax coloring.

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: https://plus.google.com/+DouglasCrockfordEsq/posts/XXkzgJEoE9v and https://plus.google.com/+DouglasCrockfordEsq/posts/FzKnHk96m2C

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. So that, you get to know at a glance how the code is using the language. There are still many ways to go about this. For example, a word may be both function and method (For example, Ruby, JavaScript).

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

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

Code Snippet 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;
    }
};
Like my tutorial? Put $5 at patreon

Or Buy Xah Emacs Tutorial

Or buy a nice keyboard: Best Keyboard for Emacs