css - 在 Atom 包中，如何在语法中设置模式样式？

Question

我想创建一个非常简单的自定义 atom我根据正则表达式突出显示特定单词的包。我正在处理处理大量 IP 地址的配置文件。我想给 ip 地址 1.1.1.1 上色，例如红色，0.0.0.0 蓝色等......

创建包非常简单，这就是我所做的:

创建的文件:C:\Users\MyUsername\.atom\packages\MyPackage\package.json

{
  "name": "language-conf",
  "version": "0.0.1",
  "description": "Syntax highlighting for configuration files",
  "engines": {
    "atom": "*"    
  }
}

和文件:C:\Users\MyUsername\.atom\packages\MyPackage\grammars\rules.cson

'scopeName': 'source.conf'  
'name': 'CONF'  
'fileTypes': ['CONF']  
'patterns': [  
  {
    'match': '1\.1\.1\.1'
    'name': 'constant.numeric.integer.hexadecimal.python'
  },
  {
    'match': '0\.0\.0\.0'
    'name': 'constant.numeric.integer.hexadecimal.python'
  }
]

当我打开配置文件时，它是这样的:

请注意 ips 的格式，这很棒! 我如何为不同的 ips 选择颜色？所有的ips都是黄色的。如果有一个颜色属性而不是名称属性，那就太好了。

---

编辑

总而言之，我想为这个例子设计样式:

http://blog.gaku.net/create-a-custom-syntax-highlighting-with-atom-editor/

在该链接中，它没有向您展示如何将不同的颜色/样式放置到不同的规则中。

Answer 1

要在 Atom 中为不同的模式设置不同的颜色，首先要在 rules.cson 中为每个模式分配不同的名称:

'scopeName': 'source.conf'  
'name': 'CONF'  
'fileTypes': ['CONF']  
'patterns': [  
  {
    # note that you should be using '\\' instead of '\' to escape '.'
    'match': '1\\.1\\.1\\.1'
    'name': 'style1'
  },
  {
    'match': '0\\.0\\.0\\.0'
    'name': 'style0'
  }
]

接下来创建一个 C:\Users\MyUsername\.atom\packages\MyPackage\styles\styles.less 文件，为每个模式名称定义具有所需颜色的 CSS 样式:

atom-text-editor::shadow {
    .style0 {
      color: blue;
    }
    .style1 {
      color: red;
    }
}

然后重新加载 Atom 窗口 (Ctrl+Alt+R)，您应该会看到带有指定颜色的图案:

之所以可行，是因为:

• 样式表是 automatically pulled当未在 package.json
中明确定义时，来自 styles 目录
• 与 atom-text-editor::shadow 组合的样式伪元素应用于编辑器