模板文字中的Atom HTML语法高亮(对于angular2)

发布时间：2020-12-14 18:51:28 所属栏目：资源来源：网络整理

导读：如何在模板文字中获取 HTML语法高亮？以前我写过的这样的东西：这里是崇高的版本https://github.com/Microsoft/TypeScript-Sublime-Plugin/pull/189/files 如何为Atom写同一件事？解决方法我能够实现这一点,这是ts.cson文件的要点. 在我的系统上形成atom

如何在模板文字中获取 HTML语法高亮？

以前我写过的这样的东西：
这里是崇高的版本https://github.com/Microsoft/TypeScript-Sublime-Plugin/pull/189/files
如何为Atom写同一件事？

解决方法

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

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

这对于角度2开发非常有用,
这里是一个截图为atom与html和css的亮点：

我找不到更好的正则表达式来匹配模板：和样式：[如果有人可以想出一个更好的正则表达式,我会接受他们的答案.

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

这是更新的截图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!