Add class to brackets for styling about bracket-matcher

[lee-dohm]

atom-text-editor::shadow {
  .bracket-matcher .region {
    background-color: yellow;
    border: 1px solid black;
  }
}

[danlshields]

I'm a little confused of how Atom works, because the class for the highlighted bracket doesn't appear in any .editor.lines.line. However, the above style actually does work (except the class is actually called bracket-matcher of course). I should have actually tried this beforehand.

You can style a small block under the bracket, but not the bracket itself.

[majcherek2048]

Agree, It would be awesome to change color and font-weight of the actual bracket for highlighting, as many other editors do automatically (built-in/hardcoded in most).

[InSuperposition]

👍

[lee-dohm]

I feel like this revising of the Issue makes it a duplicate of atom/atom#2886. Essentially, the current Decorations API (and its precursors) can create layers over or under the text z-order-wise, but do not modify the classes of the text itself. Nor do they offer a means where an over layer can easily duplicate the text which it is obscuring in order to make it look like it is modifying the text.

So really, this is a bigger problem than just the bracket-matcher package.

[bassu]

+1

+1
I would really benefit from this. I would make a yellow block around the matching bracket. The tiny blue underline is very hard to notice in a massive chunk of code.

[lee-dohm]

@Lope You can make a yellow box around the matching bracket. You just can't change the style of the text itself.

@lee-dohm great, how can I set a background color on the matching bracket? I've seen a few other people such as @majcherek2048 ask about this as well?

[majcherek2048]

@Lope I was actually asking for a way to change the actual bracket. But cool @lee-dohm .. From now on I'll be using this 👍

@lee-dohm Thank you, much appreciated!

@lee-dohm The last challenge is I'd like to style the color (text color) black so the bracket is still readable with the yellow background. I tried adding color:black !important; to your snippet but it didn't work.

I've tried to figure out what class/CSS-path to refer to... using view>Developer>Devtools but I don't understand atom's HTML layout. It's very strange.
Besides just telling me which class or CSS-path to target, can you please tell me how you discover the correct class/CSS-path?

This is what I did. I open Devtools, I click on the magnifyingglass in the top-right corner, then click on the selected, highlighted bracket. it only shows me this <span class="meta brace curly js">}</span> But there are a million of those, and the others are not selected. The nearby parent tags are not related to the bracket.

[lee-dohm]

@Lope The last challenge is why this Issue is still marked as Open 😀

[chl1996]

👍

@lee-dohm I'd really appreciate a tip for finding the right class or CSS-path to be able to style the highlighted bracket's text-color?

[majcherek2048]

@Lope Yes, we want that too, but it isn't currently possible, hence this issue is still open/unresolved. It's a feature we're still hoping/waiting for. If you find that you have the time and know-how, you could add it the code and make us all happy 😉