[Feature Request]: Add rainbow-parens Query Support for Vue

[hungvx-dev]

I'm requesting the addition of rainbow-parens support specifically for script blocks in Vue files within the rainbow-delimiters.nvim plugin. Currently, while there are good highlights for other languages, Vue files do not have consistent parentheses highlighting for script tags, which can lead to readability issues when working with complex JavaScript code.

[HiPhish]

Can you please elaborate? I don't understand what exactly the problem is.

[hungvx-dev]

@HiPhish
The current query for Vue only includes rainbow-delimiters (which highlights tags in the template tag).
-> You can add a new query to apply rainbow colors only to parentheses in the <script/> tag (without affecting the template tag).

[HiPhish]

If I understand you correctly what you want is to highlight delimiters inside the script tag only, but not inside template tag. Is that right?

[hungvx-dev]

If I understand you correctly what you want is to highlight delimiters inside the script tag only, but not inside template tag. Is that right?

Yes, exactly. Please help me implement this feature.

[HiPhish]

I don't think I want to include this sort of thing with the plugin, but you can add it to your personal configuration. In your Neovim configuration (e.g. ~/.config/nvim on Unix) create the file after/queries/vue/rainbow-script.scm (the name rainbow-script is arbitrary, you can call it whatever you want) with the following contents:

(script_element
  (start_tag
    "<" @delimiter
    (tag_name) @delimiter
    ">" @delimiter)
  (end_tag
    "</" @delimiter
    (tag_name) @delimiter
    ">" @delimiter @sentinel)) @container

This is a subset of the default query. Next in your rainbow delimiters configuration you need to tell the plugin to use your own custom query.

vim.g.rainbow_delimiters = {
	query = {
		vue = 'rainbow-script'
	},
}

Or if you prefer Vim script

let g:rainbow_delimiters = {
    \ 'query': {
        \ 'vue': 'rainbow-script'
    \ },
\ }

Note that your CSS will still be highlighted because it is not part of the Vue language. You will have to blacklist CSS if you don't want to highlight it. For more information see :h g:rainbow_delimiters, :h rb-delimiters-query and :h rb-delimiters-custom-query.

If more people want this type of query I can make it official, but until then you can add it to your configuration.

[hungvx-dev]

Thank you for the recommendation. I applied that configuration, and it works well for me.

Evidence of the result:

[HiPhish]

Actually, now that I think about it you could leave the query completely empty. As it is right now the script tag is still getting highlighted, but maybe you don't want that.

[hungvx-dev]

Thanks for the help, I am happy with it now.