Syntax Highlighting - Punctuation


Not sure if I’m missing something - brackets and other punctuation doesn’t appear to be highlighting as it would in another browser, in any of the bundled themes.

Is there a way to add this easily to a theme?

An example is in html, most editors would display all in one colour, whereas in Atom the <></> are all standard grey.

Not a big issue, but would be nice to ‘fix’…


Absolutely no problem. Here’s the Atom’s markup for <div class="dialog">:

<span class="punctuation definition tag begin html">&lt;</span>
<span class="entity name tag block any html">div</span>
<span class="entity other attribute-name html">class</span>
<span class="string quoted double html">
  <span class="punctuation definition string begin html">"</span>
  <span class="punctuation definition string end html">"</span>
<span class="punctuation definition tag end html">&gt;</span>

The only thing here that seems unstylable to me is equals sign (=) that stitches together attribute-value pair. The classes of interest for you here are:

  • punctuation
  • definition
  • tag
  • begin
  • end

A quick’n’dirty fix would be to add rules for these classes to your user stylesheet:

  • Ctrl+Shift+P
  • stylesheet
  • Enter
  • Define CSS rules based on classes above

Or just edit a theme you like most knowing what you’re looking for. I’m not sure of the details here, haven’t familiarized myself with package development yet. It’s along the lines of apm develop package-name-here that would clone the repository for you and connect the in-development version to the editor.


Different language packages handle punctuation differently. You can customize the style of any language token by:

  1. Find out what the “scope” is of the token
    1. Put your cursor to the immediate left of what you want to style (I used <html|> where the pipe character is the position of the cursor)
    2. Execute the “Editor: Log Cursor Scope” command from the Command Palette (or Alt+Cmd+P on OS X)
    3. The bottom-most entry in the dialog is the scope for that token (in the example case of punctuation around HTML tags it is punctuation.definition.tag.html)
  2. Add the following to your styles.less:
atom-text-editor::shadow {
  .punctuation.definition.tag.html {
    color: red;

You could color all punctuation in all languages red by shortening the scope (which is a CSS class) to just .punctuation, but whether that fits in for all languages is a matter of taste.


The duotone themes really take punctuation into account. However, many language grammars are very limited and some don’t recognise punctuation consistently or at all. So there’s that, but in most cases it’s definitely doable. And it’s pretty easy to contribute to language grammars if you want to improve the one you work with a lot.


Thanks for all your quick answers guys, I’ll have a play and see if I can get the style I’m after!

Braver, that’s a neat idea for a theme though I’m normally more one for colours everywhere :smiley: