Help with tree-sitter scopes

[AlexZasorin]

I was wondering if anyone could help me add a small tree-sitter query/scope to my config. I want to change the color of opening and closing angle brackets in JSX/TSX/HTML (<, />, </, >). I see in the _jsx queries, there's jsx_opening_element and jsx_closing_element that match these, but it doesn't seem like I can reference these scopes in my color scheme like I can with something like @punctuation.bracket, for example. I have a textobject.scm in /.config/helix/runtime/queries/jsx but I have not been able to piece together how to do what I'm trying to do. I'd greatly appreciate it if someone could point me in the right direction.

[the-mikedavis]

You can create a ~/.config/helix/runtime/queries/jsx/highlights.scm file with contents like:

; inherits: _jsx,_javascript,ecma

(jsx_opening_element ["<" ">"] @mycapture)
(jsx_closing_element ["</" ">"] @mycapture)
(jsx_self_closing_element ["<" "/>"] @mycapture)

then you can theme mycapture. jsx_opening_element / jsx_closing_element / "<" etc. are nodes in the syntax tree and the highlights.scm file captures patterns of nodes for theming

[AlexZasorin]

Thank you!

I managed to figure out that I needed highlights.scm and wrote something like this

(jsx_opening_element @mycapture)

before I called it a day, so I appreciate your detailed explanation about the nodes as that's the part I was missing.

[AlexZasorin]

Sorry, I think I spoke too soon. I adjusted this for TSX and couldn't get it to work.
I created ~/.config/helix/runtime/queries/tsx/highlights.scm with the following contents (replacing the javascript import for the typescript import):

; inherits: _jsx,_typescript,ecma

(jsx_opening_element ["<" ">"] @mycapture)
(jsx_closing_element ["</" ">"] @mycapture)
(jsx_self_closing_element ["<" "/>"] @mycapture)

Then I styled it in my color scheme:

"mycapture" = { fg = "cyan" }

The styling doesn't seem to appear, and when I run :tree-sitter-highlight-name with my cursor over any of the angle brackets, there is no result.

[the-mikedavis]

You might need to move the ; inherits: ... line below the patterns so that the custom patterns take priority

[AlexZasorin]

That did the trick, thank you very much.