In an Atom package, how do I style patterns in a grammar?

Question

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

It is so simple to create a package this is what I have done:

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 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 a configuration file this is how it looks:

Note how ips are formated and that is great! How can I pick colors for different ips though? All the ips are colored yellow. It will be nice if instead of the name property there was a color property.

---

Edit

In summary I will like to style this example:

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

In that link it does not show you how to place different color/styles to different rules.

Answer 1

To style different patterns with different colors in Atom, first assign a different name to each pattern 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'
  }
]

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

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

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

This works because:

• Style sheets are automatically pulled from the styles directory when not explicitly defined in package.json
• Styles that are combined with the atom-text-editor::shadow pseudo-element are applied to the editor

Answer 2

I asked this question a long time ago. My solution stopped working, so I came back to it. For some reason, now I have to append the 'syntax' keyword to my style. In other words my \styles\styles.less file now looks like:

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