title: In an Atom package, how do I style patterns in a grammar?
body: <p>I want to create a very simple custom <a href="https://atom.io/">atom</a> 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... </p>
  
  <p><strong>It is so simple to create a package this is what I have done:</strong></p>
  
  <p>Created file:
  <code>C:\Users\MyUsername\.atom\packages\MyPackage\package.json</code></p>
  
  <pre><code>{
    "name": "language-conf",
    "version": "0.0.1",
    "description": "Syntax highlighting for configuration files",
    "engines": {
      "atom": "*"    
    }
  }
  </code></pre>
  
  <p>AND file:
  <code>C:\Users\MyUsername\.atom\packages\MyPackage\grammars\rules.cson</code></p>
  
  <pre><code>'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'
    }
  ]
  </code></pre>
  
  <p>When I open a configuration file this is how it looks:</p>
  
  <p><a href="https://i.stack.imgur.com/yrN9c.jpg"><img src="https://i.stack.imgur.com/yrN9c.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Note how ips are formated and that is great!</strong> 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.</p>
  
  <hr>
  
  <h2>Edit</h2>
  
  <p>In summary I will like to style this example:</p>
  
  <p><a href="http://blog.gaku.net/create-a-custom-syntax-highlighting-with-atom-editor/">http://blog.gaku.net/create-a-custom-syntax-highlighting-with-atom-editor/</a></p>
  
  <p>In that link it does not show you how to place different color/styles to different rules.</p>