Question

I’m trying to make an accurate Visual Studio scheme.

I set hi function to blood color (#9A1102) for the “CSS function” (e.g. #thisisanid).

But now the brackets with properties (id, class) in html elements also have blood color: (ironically the same color here in Stackoverflow). But I want them blue (#2902FC)

e.g.:

Sample of code:

  " Syntax highlighting
    hi Comment   guifg=#777777 gui=none
    hi Todo   guifg=#8f8f8f gui=none
    hi Constant  guifg=#e5786d gui=none
    hi String   guifg=#2902FC gui=none
    hi Identifier  guifg=#2902FC gui=none
    hi Function  guifg=#9A1102 gui=none
    hi Type   guifg=#EF2811 gui=none
    hi Statement  guifg=#9A1102 gui=none
    hi Keyword  guifg=#9A1102 gui=none
    hi PreProc   guifg=#2902FC gui=none
    hi Number  guifg=#2902FC gui=none
    hi Special  guifg=#2902FC gui=none

    " Bottom
    hi Question guifg=white gui=none
    hi Question ctermfg=white term=none
    hi ModeMsg guifg=white gui=none

Is there a way to target html brackets only or target CSS selectors only?

Answer 1

You’ll have to figure out what the specific group-name is that you want to highlight.

Many group names are linked to higher-level group-names (e.g. vimLineComment and shComment link to Comment). If you change the color of Comment, you change the color for every group that links to it. This is why changing Function above affects both CSS and HTML syntax colors.

You might want to start with a helpful mapping to display the syntax group under the cursor:

nmap <F2> :exec ":hi " . synIDattr(synID(line("."), col("."), 1), "name")<CR>

Change <F2> to whatever mapping you would like to use.

Guessing from your description above, you may want something like the following:

hi cssIdentifier   guifg=#9A1102 gui=none
hi htmlTag         guifg=#2902FC gui=none

For more information on group-names:

:h group-name