[angular] Syntax highlight for inline HTML templates

[idooo]

It would be really cool if there was syntax highlighting and autocompletion for inline HTML templates

VS Code:

IDEA:

[zachlysobey]

With the recent VSCode update, this actually got worse for me.

My experience was similar to @idooo, but now I'm experiencing fairly major problems. See the screenshot below.

I would absolutely LOVE if VSCode would syntax-highlight html in these multi-line strings. I think a MS rep said this was coming soon (at AngularConnect)...?

[aeschli]

duplicate of #133

[jbicks]

This is still an issue - yet it has been closed. So has the duplicate #133. Is this being addressed somewhere else, or can this be re-opened?

[aeschli]

You are right, there's more to do.

[aeschli]

This is related to #2000 and #2793

[wmertens]

Also related to #5961 (which asks for broader, configurable support)

[kevjames3]

+1

[albertodenatale]

+1

[ntziolis]

+1

[KTITS-Kevin]

+1

[zekida]

+1

[zachlysobey]

@albertodenatale @ntziolis @KTITS-Kevin @zekida @kevjames3 please just subscribe and/or use reactions instead of +1s. When you do that it sends an email to everyone subscribed to this thread.

[trash]

This plugin seems to work pretty well in the meantime.

[doctorc30]

+1

[mjbvz]

I've created an example extension that demonstrates how extensions can inject grammars into JS/TS template strings: https://github.com/mjbvz/vscode-js-template-string-grammar-injection-example

The example shows how colorizing two forms of html template strings can be supported, tagged templates:

html`<a>text</a>` 

and looking at the first character of the string body to see if it is possibly an html tag:

`<a>text</a>` 

The example example is not complete but it should give a starting point for extension authors to build on

[wmertens]

Ok, but how does it handle interpolations and escaped ` symbols? That is the real problem. It's unpractical to change all injected grammars so they can handle those cases… if vscode would treat template strings as special, it would be easy.

…

On Fri, Aug 25, 2017, 12:48 AM Matt Bierner ***@***.***> wrote: I've created an example extension that demonstrates how extensions can inject grammars into JS/TS template strings: https://github.com/mjbvz/vscode-js-template-string-grammar-injection-example The example shows how colorizing two forms of html template strings can be supported, tagged templates: html`<a>text</a>` and looking at the first character of the string body to see if it is possibly an html tag: `<a>text</a>` The example example is not complete but it should give a starting point for extension authors to build on — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#130 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADWlpvHOHoC3xGnraDQGc1PC92cSHU-ks5sbf3JgaJpZM4GlMTz> .

[mjbvz]

This is a hard problem and I don't think VS Code can offer an automatic solution.

Consider a css template string:

const img = 'url(https://example.com/cat.png)';
const style = css`background: ${img} no-repeat;`

And let's say you have two grammars, VS Code's standard css grammar and one that parses ${...} expressions. I don't think VS Code can mechanically combine these grammars to parse the background: ${img} no-repeat; expression properly.

A few approaches that come to mind:

Run both grammars and then combine the tokens somehow

This doesn't work because the css grammar parses the string background: ${img} no-repeat; incorrectly:

Run the template expression grammar, then run the css grammar with template expressions removed

This works in some cases but not generally. In our example, I think this may work because the css grammar would see: background: no-repeat;. However, it is easy to come up with cases that break this:

const rule = 'background'
css`${rule}: red;`

Inject the template expression grammar into the css grammar

Depending on how this is performed, this may no not be a purely mechanical operation. Let's say you can use injection so that the css grammar knows that ${...} is a valid property value and a valid property name. That solves background: ${img} no-repeat; and ${rule}: red;, but break once you start getting more creative:

css`back${'ground:'} red

I actually don't think you can ever properly support that case though.

The core problem is that template expressions are operating at different level than the grammar, they are more like text macros from the css grammar's point of view.

---

I'd love to hear if someone has other suggested approaches here.

This example extension I provided shows how you can get a custom grammar to run inside the template string. It is then up the the grammar author to make sure JS template strings are properly handled inside their custom grammar. This may involve injecting the template grammar into a few rules, or it may require writing a completely new grammar

I've updated the example extension to show one way the injection can be done. The approach is similar to Atom's language-javascript grammar

[wmertens]

There is another option, that I proposed earlier: Have grammars define what an interpolation should be replaced with. This would already help with sane CSS interpolations, just replace all interpolations with the literal string 'INTERPOLATION'. In the case of more complex interpolations, perhaps there could be a bridge function that gets the template string and transforms it to the grammar. This transformer would look exactly like a template function, except that it would get only the static strings. So maybe to cover all cases, always have a bridge function for template string grammars and have it default to const injectLiterals = strings => strings.join('INTERPOLATION')

…

On Fri, Aug 25, 2017 at 8:42 PM Matt Bierner ***@***.***> wrote: This is a hard problem and I don't think VS Code can offer an automatic solution. Consider a css template string: const img = 'url(https://example.com/cat.png)';const style = css`background: ${img} no-repeat;` And let's say you have two grammars, VS Code's standard css grammar and one that parses ${...} expressions. I don't think VS Code can mechanically combine these grammars to parse the background: ${img} no-repeat; expression properly. A few approaches that come to mind: *Run both grammars and then combine the tokens somehow* This doesn't work because the css grammar parses the string background: ${img} no-repeat; incorrectly: [image: screen shot 2017-08-25 at 11 18 14 am] <https://user-images.githubusercontent.com/12821956/29727675-c9dbf22a-8989-11e7-8f08-d8bd0515ef25.png> *Run the template expression grammar, then run the css grammar with template expressions removed* This works in some cases but not generally. In our example, I think this may work because the css grammar would see: background: no-repeat;. However, it is easy to come up with cases that break this: const rule = 'background' css`${rule}: red;` *Inject the template expression grammar into the css grammar* Depending on how this is performed, this may no not be a purely mechanical operation. Let's say you can use injection so that the css grammar knows that ${...} is a valid property value and a valid property name. That solves background: ${img} no-repeat; and ${rule}: red;, but break once you start getting more creative: css`back${'ground:'} red I actually don't think you can ever properly support that case though. The core problem is that template expressions are operating at different level than the grammar, they are more like text macros from the css grammar's point of view. ------------------------------ I'd love to hear if someone has other suggested approaches here. This example extension I provided shows how you can get a custom grammar to run inside the template string. It is then up the the grammar author to make sure JS template strings are properly handled inside their custom grammar. This may involve injecting the template grammar into a few rules, or it may require writing a completely new grammar I've updated the example extension to show one way the injection can be done. The approach is similar to Atom's language-javascript grammar — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#130 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADWlrleWUztoG-xzd1y8GD8M2wRZHA1ks5sbxWqgaJpZM4GlMTz> .

[I-NOZex]

👍

[asfktz]

Hi, I only read this issue briefly so forgive me if it's not related.

Thought to share with you that I realized that this extension for angular 2 also works with angular 1
https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline

[kevjames3]

Nice, thanks for sharing

On Thu, Oct 5, 2017 at 3:46 PM Asaf Katz ***@***.***> wrote: Hi, I only read this issue briefly so forgive me if it's not related. Thought to share with you that I realized that this extension for angular 2 also works with angular 1 https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline [image: image] <https://user-images.githubusercontent.com/199747/31255887-f09d4d5e-aa37-11e7-8106-31637d1cfe6e.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#130 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAa3SjtjVj36ftSIMzogpiptHYfcQ9fYks5spVxRgaJpZM4GlMTz> .

-- Kevin McIntosh *Software Engineer - Seattle, WA*

[vscodebot]

This issue has been closed because it is not within the scope of the core product, but could be addressed by an extension. The VS Code Marketplace shows all existing extensions and you can get started writing your own extension in a few simple steps. See also our issue reporting guidelines.

Happy Coding!

[wmertens]

Well, I disagree that this can be handled by an extension :(

…

On Mon, Nov 20, 2017, 10:49 PM vscodebot[bot], ***@***.***> wrote: Closed #130 <#130>. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#130 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADWluY8TaAABtRxRc5Dt5fJ5CLcRXGuks5s4fPYgaJpZM4GlMTz> .

[mjbvz]

https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline

https://marketplace.visualstudio.com/items?itemName=bierner.lit-html