Emacsist RSS --- If never, make it ever: C-h C-h

Syntax Coloring in Editors


这里 查看更多 Emacs 相关推荐文章最新 Emacs 圈的动态. 欢迎关注微信公众账号: Emacsist

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.

syntax coloring emacs js-mode 2014-06-17Syntax 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:

syntax coloring emacs js2-mode 2014-06-17syntax 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.

syntax coloring vim 2014-06-17syntax 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 & vim unix hacker types are outliers.

let's look at GUI editor, Linux gedit:

syntax coloring gedit 2014-06-17syntax 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}. 〔? 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.

Commercial Editors

Now let's look at commercial editors.

syntax coloring firefox 2015-06-24Firefox browser console. 〔? JavaScript: Use Browser's JS Console

in Firefox browser JavaScript console:

  • All DOM keywords are colored correctly.
  • function parameters are colored, but only in declaration. (bad)
  • variables are colored, but only in declaration. (bad)

Now let's look at the professional $expensive$ WebStorm IDE.

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

in WebStorm:

  • All DOM keywords are colored correctly. Not only that it also categorize them by some scheme. Note that {document, undefined, length} are in same color, and { createElementNS,toString, setAttribute, createTextNode } are in same color.
  • function parameters are colored everywhere, correctly. (with underline)
  • variables are colored, everywhere, correctly.

So, it seems, the bad coloring is just because they are open source.

Dedicated commercial IDE, such as WebStorm, color things correctly.

This is easy to understand. Simplistic syntax coloring, by regex, cannot do much. In order to color all variables correctly, it requires static analyzer of the language, which is non-trivial to write.

What Do You Want?

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

i want builtin language words colored, such as builtin {keyword, function, method, class, constant, variable}. So, i can tell how the code is using the language. This is especially important for a language new to you.

thus, i created my own emacs modes for each lang.


screenshot emacs-lisp-mode-2013-05-05 emacs-lisp-modescreenshot xah-elisp-mode-2013-05-05xah-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.)

i need to research this further. Check Visual Studio, XCode, IntelliJ, NetBeans, Eclipse, Notepad++, jedit, Textmate, Sublime, etc.

How strange could this idea be? Someone out there must have done this. Have you seen?

The Ontology of Syntax Coloring

there are many ways to architect 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 (?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 screenshotWolfram Language in MathematicaMathematica reverse list-2-2Wolfram 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. Please post similarly sized screenshot with similar code section.

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); }
        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");
        return result;
原文出处: 李杀
原文地址: http://ergoemacs.org/misc/syntax_coloring_in_editors.html
原文时间: 2015-06-25 06:35
本文地址: http://emacsist.com/10304
整理时间: 2015-06-25 13:32

本文由 Hick 整理,转载请保留以上信息;
COPYLEFTThe articles on this site come from Internet, thanks to all the original authors.
      If anything about COPYRIGHT, or LEFT, please contact Emacsist at gmail dot com .