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:

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 :(

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?

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.

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

Fwiw this is a very popular feature request on Zed editor's issue board atm - people definitely want this, at least for applications such as with html or css tagged templates. Maybe the list of matched tagged templates could be restricted to a hard coded list including html, css, and maybe a few others if requested?

This is where this injection is performed:

And my suggestion above can easily be implemented with something like:

; Parse the contents of tagged template literals using
; a language inferred from the tag.

(call_expression
  function: [
    (identifier) @injection.language
    (member_expression
      property: (property_identifier) @injection.language)
  ]
  arguments: (template_string) @injection.content
+ (#match? @injection.language "^(html|css)$"))

You can see this working here:

/* Should highlight: */
html`<div>bar</div>`;

css`
	:root {
		color: red;
	}
`;

/* Should not highlight: */

htmlll`<div>bar</div>`;

cssss`
	:root {
		color: red;
	}
`;

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

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

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

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

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

Happy to open a pull request adding this line if y'all agree :)

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

Fwiw this is a very popular feature request on Zed editor's issue board atm - people definitely want this, at least for applications such as with html or css tagged templates. Maybe the list of matched tagged templates could be restricted to a hard coded list including html, css, and maybe a few others if requested?

This is where this injection is performed:

helix/runtime/queries/ecma/injections.scm

Lines 1 to 10 in e1d1a5c

	; Parse the contents of tagged template literals using
	; a language inferred from the tag.
	(call_expression
	function: [
	(identifier) @injection.language
	(member_expression
	property: (property_identifier) @injection.language)
	]
	arguments: (template_string) @injection.content)

And my suggestion above can easily be implemented with something like:

; Parse the contents of tagged template literals using
; a language inferred from the tag.

(call_expression
  function: [
    (identifier) @injection.language
    (member_expression
      property: (property_identifier) @injection.language)
  ]
  arguments: (template_string) @injection.content
+ (#match? @injection.language "^(html|css)$"))

You can see this working here:

foo.js tagged template sample code

Happy to open a pull request adding this line if y'all agree :)

I think that's a great idea