JSX/TSX highlighting seems to not work

[LamprosPitsillos]

Catppuccin

One Dark

Does onedark.nvim not support TSX/JSX highlighting ?

[dhoboy]

@LamprosPitsillos This theme has been my favorite, and I mainly write JSX React code. The below screenshot is taken with Neovim v0.7.0 with Treesitter enabled for JavaScript.

I have noticed that on Neovim 0.8 and newer, the colors are off for JSX for this theme. I'm not sure what's different about neovim 0.8 and newer with treesitter and this theme, but I have noticed it looking different. Below is the same component with neovim v0.8.3.

Nvmd why one is showing diagnostics and the other isn't, just a made up example component here.

Here's my setup for the theme, its the same on both:

let g:onedark_config = {
  \ 'style': 'dark',
  \ 'toggle_style_key': '<leader>ts',
  \ 'ending_tildes': v:true,
  \ 'diagnostics': {
    \ 'darker': v:false,
    \ 'background': v:false,
  \ },
  \ 'code_style': {
  \   'comments': 'none'
  \ },
  \ 'highlights': {
   \  'TSParameter': { 'fg': "#abb2bf" },
    \ 'TSProperty': { 'fg': "#abb2bf" },
    \ 'TSWarning': { 'fg': "#56b6c2" },
    \ 'scssTSType': { 'fg': "#56b6c2" },
    \ 'scssTSString': { 'fg': "#56b6c2" },
    \ 'javascriptTSConstructor': { 'fg': "#61afef" },
    \ 'javascriptTSTag': { 'fg': "#61afef" },
    \ 'javascriptTSTagDelimiter': { 'fg': "#848b98" },
    \ 'javascriptTSTagAttribute': { 'fg': "#e5c07b" },
    \ 'jsdocTSKeyword': { 'fg': "#5c6370" }, 
    \ 'commentTSConstant': { 'fg': "#5c6370" },
    \ 'javascriptTSOperator': { 'fg': "#c678dd" },
    \ 'DiagnosticHint': { 'fg': "#56b6c2" },
    \ 'DiagnosticVirtualTextHint': { 'fg': "#56b6c2" },
  \ },
\ }

Maybe @xeluxee can help us out here? @xeluxee helped me out before when I got stuck with something. Idk if there are other things highlighting differently for other people, I have just noticed it with JSX. I like the colors in the first screenshot, its been perfect to use until I upgraded neovim.

[xeluxee]

I have noticed that on Neovim 0.8 and newer, the colors are off for JSX for this theme. I'm not sure what's different about neovim 0.8 and newer with treesitter and this theme, but I have noticed it looking different. Below is the same component with neovim v0.8.3.

Neovim 0.8 introduced new highlight faces for treesitter. You have to subsitute TS prefix with @: TSParameter becomes @parameter, TSProperty becomes @property and so on. See :h treesitter-highlight-groups for more details.

Regarding @LamprosPitsillos's question about JSX highlighting, you can get treesitter highlight groups name with :TSHighlightCapturesUnderCursor and customize them in onedark setup.

[dhoboy]

thank you @xeluxee ! I will update my TS prefixes