Syntax highlighting with RegEx: Step by step


#1

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: [
‘txt’
]
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?

Thanks,
Boaz

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


#2

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.


#3

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

match: ‘^``.*\n’