How to achieve custom highlighting of dynamic keywords?

[yyhack110]

Describe the issue

Hello, how can I achieve custom highlighting of dynamic keywords in a Vue3+ts project? I have been troubled for several days. How can I do it? The relevant information seems to be incorrect. Thank you!
I have tried many methods, but none of them have been effective, such as the one below：

Links

https://ace.c9.io/#nav=higlighter

[andredcoliveira]

@nightwing would you be able to provide guidance here?

[nightwing]

there are several solved issues similar to this. e.g. #3905

If you want to add keywords to an existing mode, you can use the approach shown here

[yyhack110]

Thank you very much for your reply. I will give it a try @andredcoliveira @nightwing

[yyhack110]

@nightwing
Many of the properties used in these examples no longer exist, or are there new alternative implementations in typescript? For example, bgTokenizer and editor.session$ Mode. $highlightRules. $keywords and so on, this is the version I am using:

[yyhack110]

@mkslanc Thank you for your reply. I have checked and found that these are updates to the typescript declaration file, which do not involve specific implementation adjustments. Are you clear about implementing custom keyword highlighting in typescript?

[mkslanc]

@yyhack110 Sorry for the confusion, those properties actually exist in the implementation; they are just not public. I used this merely as an example of an issue that could be resolved by allowing sealed classes to have index signatures. This would help address problems with private or additional properties in a class.

As a temporary solution, until there would be better type system, you could use those properties with indexer access (if your config allows that). Example in playground

[yyhack110]

@mkslanc
My friend, I couldn't find the changeMode method, I found the change method, and when using JavaScript mode, there are no keywords on the editor.session ["$mode"]. $highlightRules. $keywords attribute. In SQL mode, I found the $keywordList attribute, but it still doesn't seem to work. This is the result I got after setting it up:

[yyhack110]

@mkslanc
My friend, I have found the problem. The TextHighlightRules.prototype.create KeywordMapper method is not executing. Unlike your example, in the vue3+typescript project, this method does not run automatically. I tried calling it manually and found it effective, but why does it automatically call in your example? I need to call it manually?