How to color ids and classes of CSS differently in gvim
I using gvim and vim and Just Love it. But, I have one pet peeve though. I like to color #id
and .clas开发者_JAVA百科s
in CSS File differently, currently both #value
and .value
are colored same.
I would like to make syntax colors of ids and classes different in gvim and vim, so that I get visual feedback for what is class and id. How to achieve this?
Add this command to your .vimrc:
:hi link cssClassName Type
Why this works:
First of all, you need to find the syntax group names of the items you're using.
You can do this by placing the cursor over the area that's being syntax highlighted and run the command:
:echo synIDattr(synID(line("."), col("."), 1), "name")
You should get cssIdentifier
and cssClassName
for #id{...}
and .class{...}
respectively.
You can then see which hightlight group they're linked to using :highlight cssIdentifier
and :highlight cssClassName
. You can view the entire highlight set using :highlight
.
By default, these are both linked to Function. The nicest solution is probably to link cssClassName to the Type syntax group instead. You should be able to use any colorscheme and it will still work:
:hi link cssClassName Type
If you add this to your .vimrc, vim will use this link instead of the one defined in the css syntax file.
If you are talking CSS then
For id
#value {
color:red ; // or and hex value that you prefer
}
for class
.value {
color : blue;
}
Added after question was edited
Well you would need to modify the color scheme file under ~/vim/colors
*Steps *
- Locate the config file under
/vim/colors
(For windows its the location where vim is installed), it would have an extension ofvim
- Add the following lines to the end of the file and save it(make a backup)
syn match cssIdentifier "#[A-Za-z_@][A-Za-z0-9_@-]*"
syn match cssClass "\.[A-Za-z][A-Za-z0-9_-]\{0,\}"
hi cssIdentifier guifg=#FF9900 gui=none
hi cssClass guifg=#FF0000 gui=none
type :colorscheme filename in vim
If all goes well , the color of #id
would be orange and that of .id
red
Go to your .vim/syntax/css.vim There you will see the lines:
252: HiLink cssIdentifier Function
and
279: HiLink cssClassName Function
You can change either of those to be highlighted as one of the other types in that section of the file.
For example:
252: HiLink cssIdentifier Constant
and
279: HiLink cssClassName Function
As long as both are different.
精彩评论