Atom HTML syntax highlight in template literals (for angular2)

How can I get HTML syntax highlight in template literals?

Something like this which I've wrote for sublime before:
Here is sublime version https://github.com/Microsoft/TypeScript-Sublime-Plugin/pull/189/files
How can I write the same thing for Atom?

1 Answers

Answers 1

I was able to achieve this, here is the gist for ts.cson file.
form atom typescript plugin on my system:
/Users/amin/.atom/packages/atom-typescript/grammars/ts.cson

https://gist.github.com/aminroosta/509476f48f05f4b56db2c0748fedc8fd

This is very useful for angular2 development,
here is an screenshot for atom with html and css highlights:

I couldn't find a better regex to match against template: and styles:[, if anyone can come up with a better regex i will accept their answers.

the important changes in ts.cson file are:

"template-html":   name: "meta.template.html.ts"   begin: "`<!---->"   beginCaptures:     "0":       name: "string.quoted.template.ts"   end:"`"   endCaptures:     "0":       name: "string.quoted.template.ts"   patterns: [     {       include: "text.html.basic"     }   ] "template-css":   name: "meta.template.css.ts"   begin: "`/\\*\\*/"   beginCaptures:     "0":       name: "string.quoted.template.ts"   end:"`"   endCaptures:     "0":       name: "string.quoted.template.ts"   patterns: [     {       include: "source.css"     }   ] 

update:

Found a solution:

  "template-html":     name: "meta.template.html.ts"     begin: "(?<=template\\:)\\s*`"     beginCaptures:     "0":       name: "string.quoted.template.ts"   end:"`"   endCaptures:     "0":       name: "string.quoted.template.ts"   patterns: [     {       include: "text.html.basic"     }   ] "template-css":   name: "meta.template.css.ts"   begin: "(?<=styles\\:)\\s*(\\[)\\s*(`)"   beginCaptures:     "2":       name: "string.quoted.template.ts"   end:"`"   endCaptures:     "0":       name: "string.quoted.template.ts"   patterns: [     {       include: "source.css"     }   ] 

Here is the updated screenshot:

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati