0

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.

Thanks.

Steve
  • 178
  • 2
  • 12

1 Answers1

1

keywordMapper is only for keywords and top level identifiers. All the properties after dot are handled in https://github.com/ajaxorg/ace/blob/v1.2.6/lib/ace/mode/javascript_highlight_rules.js#L210. so you should add another rule before it like: 

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

You can use https://ace.c9.io/tool/mode_creator.html 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.

a user
  • 23,300
  • 6
  • 58
  • 90
  • Thanks for the tip, that is one monstrous regex, I may not have mentioned but I've attempted to add to the "start" rules; the token: "options" with some rexex but no luck, are you suggesting that i need to add the code to the "support.function" token in the "property" section of the rules? - Also the autocomplete and highlighting are both requirements for me - I was going to utilise the editor.getSession().on('change'...) event to apply my custom autocomplete - is there a better way of achieving this? – Steve Jan 20 '17 at 16:16
  • added some more info about the highlighters to the answer, for completers see http://stackoverflow.com/a/30047705/1743328, you do not need to use change listener for that – a user Jan 20 '17 at 20:26
  • I see now that my understanding of this object was way off. Thanks for the link, got it working as expected following your advice, and also thanks for the link to the autocomplete question. Looks like exactly what i need (a non "hacky" solution). – Steve Jan 24 '17 at 14:49