Highlighting for embedded code in typescript template literals

[sflomenb]

Hi. I started looking into tree-sitter today, hoping I could find a way to get string interpolation syntax highlighting working for typescript.

Looking at some of the examples, I put the following code in my config:

(tree-sitter-hl-add-patterns 'typescript
  [((template_substitution
     "${" @punctuation.special
     (_) @embedded
     "}" @punctuation.special)
    )])

This successfully highlights the ${ and }. But everything in between is the same face. Is there a way, for the _ item, instead of suppling a face, maybe supply a function?

I know the tree finds every node when I view it in the debug function. So it should be able to theoretically also highlight everything it finds.

At this point, how would we go over whatever is in between and add the appropriate highlighting? I would think it would be recursive.

Great work on this. It is promising. Thank you.

[ubolonton]

That pattern is already in JavaScript's default pattern list. (TypeScript reuses that.)

When multiple patterns match, multiple faces are applied. You can try putting the cursor inside the string template and evaluating (get-text-property (point) 'face) to see what faces are applied.

If you use tree-sitter-hl-add-patterns, the pattern would be added to the top of the list, so it would be prioritized over the rest (its face comes first). You can check the variable tree-sitter-hl-default-patterns to see the pattern list.

In general, patterns whose internals may be highlighted should be placed towards the end, so that they have low priority. I don't use JavaScript/TypeScript much, so I haven't reviewed their highlighting patterns extensively. I would gladly accept a PR that rearranges the patterns to better follow that principle.

Is there a way, for the _ item, instead of suppling a face, maybe supply a function?

It's possible, but I haven't thought through that functionality yet. I don't think this specific case needs it, though.

At this point, how would we go over whatever is in between and add the appropriate highlighting? I would think it would be recursive.

Recursion would help with situations like template-in-template. Making the priority correct by shuffling the patterns should be sufficient in this case.