But how do I know which tags are used by e.g. @codemirror/lang-markdown or @codemirror/lang-yaml?
I can see in the editor that a yaml key is blue using the defaultHighlightStyle and which generated CSS-class it uses. But how do I know which lezer tag to provide to HighlightStyle.define to override that? I couldn’t find it in the GitHub source and doing console.log stuff just prints ids but not what key to use. Thanks!
That’s a good question. You can find the set of tags the highlight rules assign to a given node with getStyleTags from @lezer/highlight, but previously, it was kind of hard to figure out which tag objects you got. As of @lezer/highlight 1.2.1 these objects’ toString method returns a more helpful name.
import { defaultHighlightStyle } from '@codemirror/language'
console.log( defaultHighlightStyle.specs[16].tag.toString() )
(Looking at the colors in the specs, I’ve identified specs[16] as the likely tag I wand to override.)
After updating to highlight 1.2.1, the above snippet logs definition(propertyName). tags.definition is a function and I found defineModifier docs. This finally led me to try tags.definition(tag.propertyName) which indeed worked!
Just to let you know my journey Not sure what of that should go into the docs. But probably at least mention the toString() trick, which seems not obvious to discover (just logging the object in the browser won’t call toString()).
Not sure what of that should go into the docs. But probably at least mention the