模板文字中的Atom HTML语法高亮（对于angular2） [英] Atom HTML syntax highlight in template literals (for angular2)

问题描述

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

我以前写过的这样的东西：

这里是崇高的版本

解决方案

我能够实现这一点，这里是 ts的要点。 cson 文件。

我的系统上的atom typescript插件：

/Users/amin/.atom/packages/atom-

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

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：
名称：meta.template.css.ts
开始：`/ \\ * \\ * /
 beginCaptures：
0：
 name：string.quoted.template.ts
 end：`
 endCaptures：
0： 
 name：string.quoted.template.ts
 patterns：[
 {
 include：source.css
} 
] 
  

更新：

找到解决方案： p>

 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
模式：[
 {
 include：text.html.basic
} 
] 
模板-css：
 name：meta.template.css.ts
 begin：（？< = styles\\：）\\s *（\\ ）\\s *（`）
 beginCaptures：
2：
 name：string.quoted.template.ts
 end：`
 endCaptures：
0：
名称：string.quoted.template.ts
模式：[
 {
 include：source.css 
} 
] 
  

这是更新的屏幕截图：

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

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:

这篇关于模板文字中的Atom HTML语法高亮（对于angular2）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！