Search code examples
javascriptregextokenace-editor

How to add a new highlighting rule to mode-xml.js in ace?

I would like to add a new rule to mode-xml.js in ace. How do I do that? For example, I would like to make sure that all words which are called "android" or "tools" to be purple coloured. I know that I have to edit the theme for having it in purple colour, but how do I add a new rule to the mode-xml.js file so that these words are identifiable by the theme file?

So I need help in creating a new highlighting rule for the mode-xml.js file under ace-builds by ace. I would like if some explanation is provided.

Solution

  • The following method will highlight all occurrences of "Android" or "tools" in an attribute name (like <element Android:id="myValue"></element>). It will automatically work for all themes.

      • If you are modifying mode-xml.js, find the attributes array in this.$rules (a simple search for attributes: — with a colon — should pull it up). Then proceed to step 2.

      • If you are modifying mode-html.js, find the second array called attributes within this.addRules() (not this.$rules). Then proceed to step 2.

    2. Copy the code below and add it to the top of the attributes array (of whichever file you are modifying, as found in step 1). I've added a comma since it's not the last element in the array:

      {
    token: "purple_text",
    regex: "Android|tools",
    caseInsensitive: true
},

      This creates a rule which finds the words "Android" and "tools" (as specified by the RegEx in the regex field) and, regardless of their case (as denoted by caseInsensitive: true), assigns them the class ace_purple_text (assigned in token; feel free to change the class name). You can use this structure to create additional rules, too.

    3. In your CSS file (the one linked to index.html), add a new rule for .ace_purple_text. I have an example below that highlights the text purple:

      .ace_purple_text {
    color: purple;
}