Ace can highlight keywords in other languages

[HuibSprangers-leiden]

Currently, if you change the keyword in the parser, it will use it but not highlight it

[HuibSprangers-leiden]

I've been working on this for a bit now and I've come up to a snag. Basically, from what I can tell, the parser currently works in syntaxModesRules.ts using the hardcoded keywords, e.g. 'print' in the functions. Naturally the next step to making this work with other languages would be to make these hardcoded keywords be used dynamically depending on the current language. To get the current language is simple in typescript using window.State.lang. But obtaining the relevant keywords for this language within the typescript is where I end up getting stuck.

The way I've been trying to make this work so far is by creating a method within syntaxModesRules to search for the relevant keyword within the keyword-.lark file for that language, but I haven't been able to get that to work so far. Either that or I just haven't figured out how to search for it properly. After working on it for a while I also realized this would require a new search and file-read request every time something in the editor changed and thus be pretty inefficient.

So I've been a bit stuck trying to figure out what the best approach to this issue is, my current plan is to assign the previously hardcoded keywords to variables and overwrite these whenever the site's language is changed, but I'm not quite sure how viable of a strategy this would be either.

Which is why I made this comment to explain why this hasn't received much of an update and ask @Felienne (or anybody else reading this) about whether or not I'm on the right track/ if there's a better solution to the issue.

[Felienne]

Hi @HuibSprangers-leiden!

I understand how hard this issue is because of the hard coding of keywords. My proposal would be to do this as follows:

• Indeed change the keywords in the highlighter to variables that can be set per lang
• Use these variables to generate (offline, not at runtime) multiple highlighters (syntaxModesRules-nl.js, syntaxModesRules-en.js etc)
• Switch the highlighters when the language is switched

This approach will also allow us to create "mixed highlighters" that correctly highlight programs with Dutch and English keywords are used together

[HuibSprangers-leiden]

Thanks for the help and the quick reply @Felienne. So, if I understand it right, then I'll need to make it work like this:

• The current syntaxModesRules.ts gets variables
• These variables are then changed and syntaxModes is compiled using generate-typescript into javascript (build-tools/heroku/generate-typescript --watch like in the guidelines I presume, though I'd have to edit it a bit)
• So the generated syntaxModesRules-nl.js and en.js, etc. would presumably be added to the appbundle.js
• Whenever the language is changed, the javascript switches which syntaxModes file to use / mixes then together

Is this fitting with what you had in mind?

[Felienne]

Yes that is more or less what I had in mind! I only think we'd want to do the generation in a separate file, not necessarily in generate-typescript (because that is a compiler and we would do different things here)

[HuibSprangers-leiden]

Okay, thanks a ton for the help! I should be able to work with this.