CodeMirror 6 defaultHighlighter


I’m creating a simple programming language for a hobby simulation project. I’ve decided to use CodeMirror 6 because I like the looks of Lezer. I understand that Lezer and CodeMirror 6 are under development, but I think my question should be pretty simple.

I do not understand how the defaultHighlighter highlights tokens. For example, my language has something to this effect:

template SomeTemplateName() {
    x = 5

I’d like SomeTemplateName to be colored by associating it with the className tag from the defaultHighlighter.

Here is the relevant part of my grammar:

template { kw<"template"> TemplateName "(" commaSeparated<ParameterName> ")" block }

And here is the relevant part of my syntax:

TemplateName: "className definition",

Looking at the rendered HTML shows that SomeTemplateName is not highlighted, and looking at the DOM shows that it is not getting a style. However, if I change the syntax to the following I see that it is highlighted:

TemplateName: "string",

I think this is because TemplateName does not show up in my grammar in a way that makes it appear as a className, but I’m not entirely sure how to make it so. I’ve had similar issues with my version of VariableName and VariableDefinition being tagged with variableName and variableName definition. I am failing to understand when and why tokens get highlighted.

I suppose what I am really asking is if there is some explanation that I’ve so far missed.


I think what you’re seeing is because the default highlighter doesn’t highlight className tokens at all. That’s not for any deep reason, mostly just because the current highlighting styles are a quick, crude port of version 5’s default theme.