styleTags() from @lezer/highlight vs @lezer/language

While creating a parser, you can assign tags to it. I suppose that’s being assigned right at the time of parsing.

And there’s also styleTags(), which you can later use to assign certain nodes to certain tags.

I’m wondering, is there any performance difference to using those two approaches? Is assigning tags at the parse time more performant?

There is no difference. styleTags with .configure() reconfigures a parser to attach tag information directly to the node types.

1 Like

@marijn I just found out, is it possible to use new common.NodeProp() for that?

I could parse/iterate the tree, then assign certain NodeProp, and then read that in highlighers/decorators? I found that it’s being used in markdown with headings and foldings - it looks like it’s adding isHeading prop, and then in folding it’s being read.

What do you think?

No. You’d have to add it to your parser before parsing. These (both parsers and trees) are immutable.

Okay, then maybe it’s possible to assign tags to the parsed tree conditionally somehow? Something like styleTags(), but that could allow to do somelogic around it?

Something similar to:

styleTags([
  function (state) {
   if (some logic) {
     return tags.monospace;
   }
  },
  {
  'InlineCode/...': tags.monospace,
  'HTMLBlock HTMLTag Entity': html
  }
]);

Is this possible?

Or maybe MatchDecorator, but one that doesn’t take regexp, but a callback to determine whether to style or not? Basically anything I can put between parsing and styling.

No, that’s not possible.

So let’s say I have markdown parser, that parses HTML. And in that HTML, I have styles <sub> and <sup>, and I want to style just those tags.

How would you approach this?

The highlighting system won’t help there. You’d have to write a custom decorating extension.