Handlebars icon indicating copy to clipboard operation
Handlebars copied to clipboard

syntax highlighting is lost after call to handlebars helper with string parameter inside script block

Open aeschli opened this issue 6 years ago • 4 comments

From @Jusys on October 9, 2017 21:38

  • VSCode Version: 1.17.0 (issue present in both 32bit and 64bit)
  • OS Version: Windows 7 32bit, Windows 10 64bit

Steps to Reproduce:

  1. Create handlebars file;
  2. Type some html code;
  3. Create script block with function;
  4. Inside function make a call to handlebars helper with string parameter;
  5. After this syntax highlighting will be lost;

image image

If call to helper is without string parameter, everything is ok: image image

Reproduces without extensions: I have no extensions installed

Copied from original issue: Microsoft/vscode#35934

aeschli avatar Oct 10 '17 08:10 aeschli

The problem is that the handlebar grammar uses the 'source.js' grammar for embedded code. That's not really correct due to the templates. The grammar that we use in VSCode doesn't handle the {{{ helper 'param'}}} and gets stuck in a rule (FYI @sheetalkamat) . It's a weakness of TextMate that it doesn't have a proper embedding story and a problem in the embedded code can ruin the colouring of the rest of the file IMO the right approach is for the handlebars grammar to not include source.js, but have included simple highlighting rules for embedded code, e.g. do keyword, comment and strings highlighting.

aeschli avatar Oct 10 '17 08:10 aeschli

Hey @aeschli,

Really sorry for taking this long to get back to you!

I'm not really sure what's going on here, this problem doesn't seem to manifest in Sublime Text:

image

I'm very apprehensive about including other syntaxes as that would mean I need to maintain not only Handlebars, but potentially several others. With this particular usage (as in injecting a value into a script, not just as an HTML template), you could be using Handlebars in any other language – not just JS –, so I would need to potentially include anything from PHP or ASP, etc.

I might be totally misunderstanding what this is about though, so in that case please explain! 😺

daaain avatar Dec 15 '17 15:12 daaain

Hi @daaain, the difference to Sublime is that Sublime uses a different JavaScript grammar than us. That grammar doesn't seem to bother about the {{{ syntax, but, if you ask me, that's just luck and not something you can expect from every embedded grammar.

I understand that you'd prefer to keep the grammar minimal and reuse grammars from other languages, but given that handlebar templates can be everywhere, you still might want to look into doing the colouring of embedded code yourself. That could be very minimal with highlighting of keywords, comments and strings.

aeschli avatar Dec 15 '17 16:12 aeschli

Actually in my Sublime Text (v3.3.1, Build 3176) the problem does exist:

image

MrNghia123 avatar Sep 19 '18 16:09 MrNghia123