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)，您应该会看到带有指定颜色的图案：

这有效，因为：

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

Answer 2

我很久以前就问过这个问题。我的解决方案停止工作，所以我又回来了。出于某种原因，现在我必须将“语法”关键字附加到我的样式中。换句话说，我的\styles\styles.less文件现在看起来像：

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

Answer 3

这里有一个链接指向如何编写样式的一些变化的解释（以及为什么添加“语法”前缀）： https ://flight-manual.atom.io/shadow-dom/sections/removing-shadow- dom样式/

我希望它会有所帮助，因为它帮助了我。我对为什么我的风格不起作用而生气。