JSX components highlight support

[Maverick5000]

Is your feature request related to a problem? Please describe.

HTML tags are the same color than JSX tags

Describe the solution you'd like

Different coloring for React components and HTML tags, similar to vscode one monokai theme

Describe alternatives you've considered

I've seen some post's mentioning treesitter changed the way highlighting is done for some tags since some themes support this color difference ex: tokyonight

Additional context

No response

[cpea2506]

Hi, currently I'm not a React user anymore so I will need time to investigate and think on how to make it fit your experience. If you have something in your mind. Please consider a PR, that way you may add more useful changes to help improve the theme beside your current request. Thanks a lot <3

[Maverick5000]

I've been trying to find the solution, but I'm new to the Neovim ecosystem, so I'm mostly lost when trying to do stuff. Anyway, if I find something, I'll be happy to make a PR. 😁

[cpea2506]

Hi, if you are using Neovim 0.9 or above, I think it could be because semantic token is enable by default. Could you please try the code below and tell me the result?

-- Hide all semantic highlights
for _, group in ipairs(vim.fn.getcompletion("@lsp", "highlight")) do
    vim.api.nvim_set_hl(0, group, {})
end

Also, you can put the cursor inside any of your component and execute :Inspect. This command will show the highlight group that your component currently has.

[Maverick5000]

I tested the code snippet but it didn't make any difference in the highlighting. However, using :Inspect helped me a bunch! I managed to change the color using the highlight group. ["@tag.tsx"] = { fg = colors.aqua },