How to add more keywords to the existing language?

I am trying to add more keywords like ["AAA.AA.A", "BBB.BB.B", "CCC.CC.C"] to the current language eg: javascript. The language is dynamic based on what the user has selected. It can be javascript or python or sql etc…

I saw extendMode as one of the solutions but not sure how to use it. I am working with react-codemirror2 .

Any help?

If you only want highlighting of those words to change, an overlay might work.

Consider these kind of words:


Dots are considered as separate words. That seems to be my ultimate problem. I want AAA.AA.A to be considered as 1 word and wrap in 1 span.