Add html highlight to angular component `template`

[basarat]

This can be added as demonstrated here : https://github.com/TypeStrong/atom-typescript/pull/798

That work was dropped with v8.0.0 when we moved to a Microsoft maintained text mate grammar. We have a script https://github.com/TypeStrong/atom-typescript/blob/5dfdd68497a0b3b3a7d6bc3575c223400ef29f0b/scripts/grammar.js (run using npm build in our project root) that contains any custom rules.

The custom template rules need to be added to grammar.js :rose:

[blakeembrey]

They have a branch supporting it: https://github.com/billti/TypeScript-TmLanguage/blob/ngml/TypeScript.YAML-tmLanguage#L507 (reference: https://github.com/Microsoft/TypeScript/issues/6508).

[salvdev]

Is there anyway to get html highlighting in between template: yet?

[Jonatthu]

Excuse me I can't figure out how to add the html syntax highlighted in ts files when you write templates in the middle of these --> `` I already replace the grammar.js and run build in the root of the project atom-typescript but nothing happened. What now?

Is there any tutorial for add this feature?

[daslicht]

So does that men we get syntax highlight in template strings using Atom now ? as described here: https://github.com/Microsoft/TypeScript/issues/6508

?

[MarkPieszak]

@basarat Was this ever added somehow to Atom? Would love template highlighting! 👍

[GregOnNet]

@blakeembrey I started to integrate the grammar you have mentioned: https://github.com/billti/TypeScript-TmLanguage/blob/ngml/TypeScript.YAML-tmLanguage#L507

Problem

Unfortunately the linked grammar does not work if there are any html attributes in the template.

Question

Do you know of a updated grammar source we could use?

My approach

I simply downloaded the language within scripts/grammar.js and merged the ng-grammar into the official grammar provided by Microsoft.

[blakeembrey]

@GregOnNet Maybe you can mark it as the built-in HTML grammar?

[GregOnNet]

Yes, I will try. Thanks for your advice.

Kinds Greg

[GregOnNet]

Looks good so far. I attached the following picture to demonstrate that the whole HTML-Highlighting is working.

(Do not use script and style tags in your inline templates. It is just a demo)

[MarkPieszak]

Can we play around & test this implementation if we update Atom typescript @GregOnNet ? Wow nice job guys 👍

[GregOnNet]

@MarkPieszak Thanks,

I created a pull-request and hope it will be merged soon: https://github.com/TypeStrong/atom-typescript/pull/948

If you want to test this feature you only have the possibility to clone atom-typescript, checkout my branch and link it manually into Atom.

Kinds Greg

[basarat]

Released with https://github.com/TypeStrong/atom-typescript/releases/tag/v8.10.0 Thanks @GregOnNet ! :rose:

[bennypowers]

This only works for properties called 'template' inside of objects.

but:

var someHtml = `<p>a template</p>`; //doesn't wotk
var myObject = {
  template: `<p>this works</p>`, //works
  myHtml: `<p>this doesn't</p> //doesn't work
};

[lukescott]

Now that atom-typescript uses atom's built-in language-typescript grammar this feature seems to have gone missing. Would it be possible to add a grammar that imports atom's language-typescript and adds the html rule? This would be useful for maintaining old angular projects.

[lierdakil]

We don't currently have the resources to maintain the grammar, sorry. And upstream isn't too keen on including this either.

It should be possible to write a grammar injection though. If you want to try your hand at that, you can take a look how Atom's TODO injection grammar does that: https://github.com/atom/language-todo

[colingm]

So I went ahead and got a basic grammar injection for this that checks both ts and js files for inline template and styles where it can then use the default html/css grammar rules. Feel free to use it or open PRs to make it better. I didn't put that much time into it so I'm sure it could be improved:

https://github.com/colingm/language-angular-inline https://atom.io/packages/language-angular-inline