在Atom包中,如何在语法中设置样式？

Question

我想创建一个非常简单的自定义原子包,我在其中突出显示基于正则表达式的特定单词.我正在处理处理大量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": "*"    
  }
}

AND文件: 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都是黄色的.如果不是name属性,那么就会有一个颜色属性.

---

编辑

总之,我想设置这个例子的样式:

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),您应该看到具有指定颜色的图案:

这是因为:

• 未明确定义时,样式表会自动从styles目录中拉出package.json
• 与atom-text-editor::shadow伪元素组合的样式将应用于编辑器