feature: Better syntax highlighting.

[Redoxahmii]

Did you check the docs?

• [X] I have read all the solarized-osaka.nvim docs

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

I only use 2 themes in neovim which is this one and tokyonight.nvim and i noticed that tokyonight provides a little more differentiation and highlighting for some tags which do not reciprocate in solarized-osaka and also this theme has some bad highlighting when it comes to markdown. One more thing i wanted to add is if it will have some good support working with flash.nvim as the colors do not match when using it and it is very difficult to differentiate when using it.

Describe the solution you'd like

I would like this to also have that same highlighting as it helps a lot in visually differentiating between tags.

• A soft example is given below:

This is the solarized-osaka where the components that are being imported and used are not differentiating in color from the other basic html tags whereas if we check this in tokyonight:

This shows a clear difference between those tags. This was created from a fork of Tokyonight so implementing those features should not be too difficult as it just needs a value of a different color for that treesitter object as far as i can think.

Describe alternatives you've considered

Currently it seems that only Tokyonight has this implemented and i did check it on gruvbox and catppuccin and they show the same behavior.

Additional context

No response

[0xfraso]

Hi, since solarized-osaka provides on_highlights callback to override your highlights you can use treesitter to do like so:

in you init.lua (or anywhere inside your nvim config) define a user command

vim.api.nvim_create_user_command("HightlightUnderCursor", function()
    local result = vim.treesitter.get_captures_at_cursor(0)
    print(vim.inspect(result))
end, {})

Then call It using :HighlightUnderCursor with your cursor on your HTML custom tag. It will give you a list of available treesitter highlights

Then you can override them using your preferred colors inside the on_highlights function inside your plugin setup:

on_highlights = function(hl, col)
      hl["your treesitter highlight here"] = { fg = "your custom color here" } 

      --- or use provided col param to retrieve colorscheme's palette
      hl["@tag"] = { fg = c.orange }
end,

Remember that you might need to prepend a @ when referencing a treesitter highlight.

Hope It helps

[craftzdog]

Can you tell me which token to update?

[0xfraso]

Just made a quick research and found that the method mentioned above is just deprecated and possible to achieve directly by executing :Inspect with cursor on the interested treesitter node (in our case the react component)

for example, I get the following in a javascript react component

Treesitter
  - @variable.javascript links to @variable javascript
  - @type.javascript links to Type javascript
  - @tag.builtin.javascript links to Statement javascript
  - @tag.javascript links to Statement javascript

the same command executed in a tsx react component gives the following output:

Treesitter
  - @variable.tsx links to @variable tsx
  - @type.tsx links to Type tsx
  - @tag.builtin.tsx links to Statement tsx
  - @tag.tsx tsx

So I guess since solarized-osaka uses mostly treesitter based highlights you can easily override them but It depends on specific language needs

[Redoxahmii]

Just made a quick research and found that the method mentioned above is just deprecated and possible to achieve directly by executing :Inspect with cursor on the interested treesitter node (in our case the react component)

for example, I get the following in a javascript react component

Treesitter
  - @variable.javascript links to @variable javascript
  - @type.javascript links to Type javascript
  - @tag.builtin.javascript links to Statement javascript
  - @tag.javascript links to Statement javascript

the same command executed in a tsx react component gives the following output:

Treesitter
  - @variable.tsx links to @variable tsx
  - @type.tsx links to Type tsx
  - @tag.builtin.tsx links to Statement tsx
  - @tag.tsx tsx

So I guess since solarized-osaka uses mostly treesitter based highlights you can easily override them but It depends on specific language needs

Thanks for the info i also created another issue in the repo where i was facing the same kind of issues when working with .jsx format files as the tags would have altogether different colors for the < signs.

[Redoxahmii]

Can you tell me which token to update?

Treesitter

• @variable.tsx links to @variable tsx
• @type.tsx links to Type tsx
• @tag.builtin.tsx links to Statement tsx
• @tag.tsx tsx Extmarks

• IlluminatedWordRead illuminate.highlight

  these are the tokens that need to be changed if it is to follow the tokyonight theme. Also check the .jsx files and see the white highlight on < > symbols i couldn't figure that out on my own. On inspect using the method provided above it gives this

  { "variable", "type", "tag.builtin", "tag" } 

[Redoxahmii]

@0xfraso sorry for tagging you but would this be considered correct ?

{
    "craftzdog/solarized-osaka.nvim",
    lazy = true,
    config = {
      function()
        require("solarized-osaka").setup({
          on_highlights = function(hl, col)
            hl["@tag.tsx"] = { fg = "#ffffff" }
          end,
        })
      end,
    },
  }

I am not too familiar with treesitter and themes so not sure if this is the right method. Currently this is not displaying any results.

It was a bad mistake of using {} in the config which needed to be removed.

[Redoxahmii]

created a pull which fixes this and also the the white <> tag issue.