Inconsistent syntax highlighting for tagged templates in JavaScript

[kj]

Summary

Tagged template strings in JavaScript have strange, inconsistent highlighting. It appears that with certain characters in the function name, the entire template string content is highlighted as regular JavaScript.

The characters 'r', 'd', and 'c' seem to change the highlighting. Strangely, the function names starting with 'd' and 'c' also change the colour of the single quoted string 'Baz', but function names starting with 'r' do not (even if they're not .

Edit: Just to be clear, the qwetyuiopasfghjklzxvbnm tagged templates in the screenshot have the correct highlighting (so named because they don't include any of the characters which cause the highlighting to change).

Reproduction Steps

The source code above:

qwetyuiopasfghjklzxvbnm`
  Foo 123 Bar -456 'Baz';
`;

r`
  Foo 123 Bar -456 'Baz';
`;

d`
  Foo 123 Bar -456 'Baz';
`;

c`
  Foo 123 Bar -456 'Baz';
`;

qwetyuiopasfghjklzxvbnm`
  Foo 123 Bar -456 'Baz';
`;

r`
  Foo 123 Bar -456 'Baz';
`;

rdc`
  Foo 123 Bar -456 'Baz';
`;

Helix log

No response

Platform

Linux

Terminal Emulator

alacritty 0.14.0 (22a44757)

Installation Method

source

Helix Version

helix 24.7 (101a74b)

[rwakulszowa]

The 3 magic characters happen to correspond to 3 popular single-character programming languages:

• r
• d
• c

Helix supports tree sitter language injections, using a different parser for a part of a file (here - a template literal). There's no reliable way to tell what language a string represents, so it uses a simple heuristic, matching the template tag against a list of known injection regexes.

For example, the d comes from:

helix/languages.toml

Line 2579 in 38faf74

injection-regex = "d"

So, long story short, that's just a negative side effect of supporting injections in the first place.

Disclaimer

I'm not an expert. I'm not even a contributor. I was just hoping to pick up a simple task to contribute, but there's nothing to do here :(

[kj]

Ah! Thanks for pointing that out. Perhaps these patterns could be a bit more strict, as a single letter which matches in any string including them seems far from ideal.

[[language]]
name = "c"
injection-regex = "^c$"

[[language]]
name = "c"
injection-regex = "^d$"

[[language]]
name = "c"
injection-regex = "^r$"

This is how I'm working around it now anyway. I'm also not really convinced that template strings should be language injection sites. Unlike for example Markdown code blocks where the intention is clear, in JavaScript it's just a function name which could mean anything. Either way though, I think the injection-regex patterns could be improved

Edit: and this doesn't just apply to single letter patterns. Should the injection-regex just imply ^ and $? This is probably a separate issue at this point. Should I close this and open another one?

[rwakulszowa]

Should I close this and open another one?

I'd leave it open until a real maintainer shares their thoughts.

I agree it's a bit confusing, though.