Is it possible to colorize the brackets of HTML tags, like in Dreamweaver and Brackets?

I just started using Atom, and I think it may become my primary code editor.

However, I prefer to have the HTML tag brackets colorized, like Dreamweaver and Brackets do. They also colorize the quotes for attributes, and the class/ID markers for CSS.

Is it possible to do this with Atom? I tried finding a setting or package for this, but wasn’t able to find one. (I might be searching for the wrong things.)

Thanks!

You’re just asking for colours like in the right hand side image?

Yup, the left side is Atom and the right side is Brackets. (I should’ve mentioned that earlier.)

  1. Disable Tree-sitter (either for HTML only [1] or using the global Settings -> Core -> Use Tree Sitter Parsers toggle
  2. Add the following to your style sheet
atom-text-editor .syntax--text.syntax--html {
  .syntax--punctuation.syntax--definition.syntax--tag {
    color: #e06c75;
  }

  // .syntax--string.syntax--quoted.syntax--double,
  // .syntax--punctuation.syntax--definition.syntax--string {
  //   color: red;
  // }
}

The first colour is for tag punctuation. You can match an existing colour by opening dev tools (ctrl-shift-i), using the select tool to inspect text of the desired colour and copying the value in the Styles tab.

The commented out line is for quote marks. I found they were already made the same colour when Tree-sitter was disabled though.

While the lack of colour on the punctuation marks is likely intentional (IMO I prefer it), the inability to recolour it should not be. I’ll raise a bug.

[1] To disable for HTML only, add this to the bottom of your config.cson (at the root level; first line should have no whitespace to the left)

".html.text":
  core:
    useTreeSitterParsers: false

<future rant>
If you do (which I recommend; Tree-sitter parsers generally work better than the old TextMate ones), don’t forget about it if you have other syntax issues. Only Tree-sitter is supported now when possible, so if you encounter a bug in the syntax highlighting it won’t be fixed. Additionally, the first question you’ll be asked is “Tell us what Settings -> Core -> Use Tree Sitter Parsers says”, but setting it for a specific language bypasses this and can lead to confusion.
</future rant>

2 Likes