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?

解决方案

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

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: