Best way to highlight specific keywords

v6
1

Hello, I’m looking for the best way to add highlighting to a specific set of JS functions in CodeMirror 6. My initial thought was to try to create a custom LRLanguage based on @codemirror/lang-javascript:

import { javascriptLanguage } from "@codemirror/lang-javascript"
import { styleTags, tags as t } from "@codemirror/highlight"
import { LRLanguage } from "@codemirror/language"

LRLanguage.define({
    parser: javascriptLanguage.parser.configure({
      props: [styleTags({ myCustomFunction: t.keyword })],
    }),
    languageData: javascriptLanguage.data,
})

…but this doesn’t seem to have any effect because javascriptLanguage is still based on the underlying Lezer JS parser, and so adding a new keyword would require modifying that parser. Is there any way to accomplish this without forking the Lezer JS parser?

2

You could use a plugin with a MatchDecorator to add styling outside of your language mode (though of course it’s hard to accurately identify syntactic elements with just a regexp). Or you could make a plugin that uses the syntax tree to find and decorate your keywords.

1 Like
3

I make a try, use specialize to separate builtins, feat: support builtin function by zhanba · Pull Request #13 · lezer-parser/python · GitHub, but still have some problem.