ace-editor code highlight object notation


Using the Ace Editor pre-packaged version and trying to add some basic code highlighting (custom keywords) to the Ace JavaScript editor.

Please do not read too much into the example, it is purely an example to avoid posting sensitive data.

Keywords example: added to the keywordMapper:

"options": "settings|options|global|user";

And added some css to the page that uses it:

.ace-eclipse .ace_options {\
  color: rgb(255,20,147);\

I figured it would just highlight the keywrods so i can get this (without highlighting the dots):
enter image description here

But nothing I’ve tried works. I can only get the first (pre dot: ‘.’) word to match. “.settings” wont match (you’d think it would).

The idea is that i’ll implement auto complete based on the previous token, e.g. type “settings.” to get a list containing “options” (and other stuff), click options and enter “.” to get a list containing “global|user”, another “.” to show all the settings in each respective object.

I’ve experimented a little using the rules, but that is confusing enough, and the closest i can get is it working WITH dots being highlighted.

Any assistance is appreciated.

P.s. Had a go at the <![CDATA[ example on the ace main site and couldn’t even get the code they post to work.

Its so confusing and there’s hardly any documentation! I cant help but think it cant be that hard, as there are a ton of “real world users” on their site.



keywordMapper is only for keywords and top level identifiers. All the properties after dot are handled in
so you should add another rule before it like:

            token : "options",
            regex : "settings|options|global|user"

You can use to experiment with the highlighter

But for autocompletion you don’t really need to highlight tokens, you can just use their values, instead of types.

Answered By – a user

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.