In the Atom package, how do I style templates in grammar?

Question

I want to create a very simple custom atom package where I highlight specific words based on regular expressions. I work with configuration files dealing with a large number of IP addresses. I want the color of the ip address 1.1.1.1 red, for example, 0.0.0.0 blue, etc.

So just creating a package, this is what I did:

Created file: C:\Users\MyUsername\.atom\packages\MyPackage\package.json

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

And the file: 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' } ] 

When I open the configuration file, it looks like this:

Pay attention to how ips are formed, and that's great! How can I choose colors for different ips? All ips are yellow. It would be nice if instead of the name property there was a color property.

---

Edit

In short, I will like this example:

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

In this link, it does not show you how to put different colors / styles in different rules.

Answer 1

To style different templates with different colors in Atom, first assign different names to each template in your 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' } ] 

Then create a file C:\Users\MyUsername\.atom\packages\MyPackage\styles\styles.less that defines CSS styles with the desired colors for each template name:

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

Then reload the Atom window ( Ctrl+Alt+R ), and you should see your templates with the colors assigned:

This works because:

• Style sheets are automatically extracted from the styles directory if they are not explicitly defined in package.json
• Styles that combine with atom-text-editor::shadow apply to the editor.

Answer 2

I asked this question a very long time ago. My solution stopped working, so I returned to it. For some reason, now I have to add the keyword “syntax” to my style. In other words, my \styles\styles.less now looks like this:

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