模板文字中的 Atom HTML 语法高亮显示（对于 angular2）答案

【问题标题】：Atom HTML syntax highlight in template literals (for angular2)模板文字中的 Atom HTML 语法高亮显示（对于 angular2）
【发布时间】：2016-08-10 13:44:22
【问题描述】：

如何在模板文字中获得 HTML 语法高亮显示？

我之前为 sublime 写过的类似这样的东西：
这是崇高版本https://github.com/Microsoft/TypeScript-Sublime-Plugin/pull/189/files
我怎样才能为 Atom 写同样的东西？

【问题讨论】：

标签： angular ecmascript-6 atom-editor

【解决方案1】：

我能够做到这一点，这是ts.cson 文件的要点。
在我的系统上形成 atom typescript 插件：
/Users/amin/.atom/packages/atom-typescript/grammars/ts.cson

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

这对angular2开发非常有用，
这是带有 html 和 css 的 atom 的屏幕截图：

我找不到更好的正则表达式来匹配 template: 和 styles:[，如果有人能想出更好的正则表达式，我会接受他们的答案。

ts.cson 文件中的重要变化是：

"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"
    }
  ]

更新：

找到解决办法：

  "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"
    }
  ]

这是更新后的截图：

【讨论】：