customizing syntax highlighting and autocomplete on the fly

[Pedro Bakster]

I'm trying to make a javascript editor for objects that a user can add to a 3D world such as

car
cow
catapult, etc.

each object has its own properties such as
car.gas
cow.animation.run
etc.

Is there a file or variable that I can add custom words to, for doing automatic highlighting and autocomplete for the 3D objects the user chooses to put in the world?

I am having trouble finding examples of this on stackoverflow or in the forum or the docs.

[costa]

I've been through the same exercise and I had the same reaction as you did. You need to define a "mode" file for your language and then you may need to implement you own completer.

You definitely need to download the source code and look at the existing files in the <location where you unzipped the archive containing the source code>\ace-master\lib\ace\mode directory.

Here is what I did (it's not exactly the right order but close):

1. I brushed up my knowledge of JavaScript. The source code uses a lot of EcmaScript 5 constructs that you need to know in order to understand what the code does. I recommend the JavaScript Definitive guide 6th edition, especially the chapters about objects, classes and functions. You should understand what closures are, for instance, and how they work.

2. Read this page:http://ace.c9.io/#nav=higlighter

3. I defined the highlight rules class. If your language is similar with one of the existing language take a look at the ***_highlight_rules.js files in the directory above. This was pretty straight forward. I adapted the C language highlighting rules. Because my language has custom functions I defined a method in this class that I use to check whether an identifier is a custom function.

4. I defined the file responsible with the code folding. This was the most dificult one. Look in the ace-master\lib\ace\mode\folding subfolder for samples.

5. I defined the mode code - that was the simplest, again based on an existing one (C language). This code glues together the highlight rules and the folding code.

6. I combined the files defined at steps 3-5 into one file mode-<your custom mode name>.js which I deployed along with the other ace distribution files. Then you call editor.setMode("<your custom mode name>") to force ace to use your own mode.

7. I defined my own code completer which I added to the editor. Right now I am struggling with that... Check out my other posts.

From a practical point of view, I started by creating the mode file which included the highlight rules class (3) and the mode class (5). I wired the file to the editor, went through several iterations of tests and changes, then I once I was satisfied, I moved onto 4. Now I am at 7.


I hope this helps.