Is it possible to access specific nodes from an existing grammar for styling?

v6
1

I have a very basic question: I use the lang-yaml package to style Markdown with a YAML frontmatter. However, because Markdown is one of the few languages that looks better and is easier to read with a sans font, I want to make everything use a regular sans font, but I want to keep the frontmatter in monospace.

I see that the frontmatterLanguage defines a new node, FrontmatterContent that would be suitable for styling separately. However, I cannot find a way to access this and assign a monospaced styling to it in my themes, because tag names aren’t exported from the package.

I did see that the package itself already assigns styling to the DashLine node:

const frontmatterLanguage = LRLanguage.define({
  name: "yaml-frontmatter",
  parser: frontmatterParser.configure({
    props: [styleTags({DashLine: tags.meta})]
  })
})

How could I style the frontmatter content node separately from the rest…?

Tia!

P.S.: Is there a reason you chose to style the DashLine using tags.meta instead of tags.contentSeparator…?

2

I think the easiest way to do this is to use a scoped highlight style that adds a style to all yaml content, like this.

They are kind of similar to the brackets that delimit metadata (for example attributes in Rust), which tend to be styled as meta. But indeed, contentSeparator would have made sense too. Assigning tags isn’t really an exact science—it’s more of a vague pattern matching thing. You can reconfigure a parser locally if you want to add or update tag assignments.

3

Amazing, thank you so much! And regarding the tag definition: Absolutely, I was just curious as to why you did that, but your response makes perfect sense. Thanks!

On another note: I think the code you came up with would make for a great example on the CodeMirror documentation, since the use-cases cover anything that has to do with parsed mixing, if I understand it correctly.