ace-editor

How to implement a recursion rule in ace editor?


I need to highlight ${} in a string, and if ${} has a word "baseMembers", it need to be highlighted by different color too, like: enter image description here

How could I accomplish this? Thanks.

please see the pic above.


Solution

  • One of the ways to do it is like this: you push a state that's like your regular start-state but has an exit condition (and pushes itself again on { so that it supports nested brackets)

    var oop = require("../lib/oop");
    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
    
    var HighlightRules = function() {
        var start = [
            { regex: "//.*", token: "comment" },
            { regex: "\\d+", token: "constant.numeric" },
            { regex: '\\$"', token: "string", push: "string" },
            { defaultToken: "text" }
        ];
        this.$rules = {
            start: start,
            string_expr: [
                { regex: '\\{', token: "curly.paren.lparen", push: "string_expr" },
                { regex: '\\}', token: "curly.paren.rparen", next: "pop" },
            ].concat(start),
            string: [
                { regex: "\\{", token: "string", push: "string_expr" },
                { regex: '"', token: "string", next: "pop" },
                { defaultToken: "string" }
            ]
        };
    
        this.normalizeRules();
    };
    
    oop.inherits(HighlightRules, TextHighlightRules);
    

    enter image description here