Syntax highlighting with RegEx: Step by step


I’m looking for step-by-step instructions for implementing syntax highlighting using pattern matching. I have the following in my cson file, but no idea how to associate it with a particular color:

scopeName: ‘source.boaz’
name: ‘boaz’
fileTypes: [
patterns: [
match: ‘^…*$\n?’
name: ‘entity.other.boaz’

I read articles about how to override theme colors using styles.css. Eg, I added this to the file:

atom-text-editor.editor .syntax-header {
color: seagreen;

How do I associate the RegEx with the color?


PS. I’m new to Atom but was able to do that in Sublime Text 3.


Syntax highlighting is more removed from the grammar than that (and I believe it’s the same in Sublime Text).

  • Your grammar assigns a set of scopes to every character in the users file.
  • Syntax highlighting assigns a colour to every set of scopes.

This makes the two very easy to confuse. Importantly though, the scopes are not just for syntax highlighting. I use them a lot for my packages that rely on knowing the context of a certain point. Instead of having to write complicated “check if commented, escaped, etc…” rules, I just query the scope of the point.

As for your question, assuming your grammar is applied to the file correctly, the following should work in your styles.less file

atom-text-editor .syntax--source.syntax--boaz {
  .syntax--entity.syntax--other {
    color: red

Finally, step by step instructions for making a grammar or syntax theme can be found in the flight manual.


Thank you very much!!! I just changed my RegEx per below and it works great!

match: ‘^``.*\n’