cpea2506/one_monokai.nvim

JSX components highlight support

Opened this issue · 4 comments

Maverick5000 commented

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

HTML tags are the same color than JSX tags

image

Describe the solution you'd like

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

image

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

image

Additional context

No response

cpea2506 commented

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 commented

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. 😁

  • ❤️1
cpea2506 commented

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 commented

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 },

  • 😄1