Proper Html Attribute Highlighting In Vim?

While I was looking for proper html tag highlighting in Vim, I found this post. But after looking at romainl's answer (and his screenshot) and html syntax file, I wonder how can I

Solution 1:

1. Exploration

   Here is a very useful function I've found somewhere (a long time ago, probably on the Vim Wiki) that gives you the syntax group of the word/symbol under your cursor:

   function! SynStack()
       if !exists("*synstack")
           returnendifechomap(synstack(line('.'), col('.')), 'synIDattr(v:val, "name")')
   endfunc

   Just place your cursor on the item you want to inspect and type :call SynStack() to echo the syntax group in the command-line.

   If I place my cursor on the = in <div id="example"></div>, the output of SynStack() is ['htmlTag'].

   With the cursor on <> I get ['htmlTag'] as well.

   With the cursor on div I get ['htmlTag', 'htmlTagN', 'htmlTagName'] which means that the color of div (h1, p…) is defined via a special syntax group called htmlTagName that inherits from htmlTag.

   Some alternative/custom syntax files may define other syntax groups with slightly varying name so my example is only valid for me. You'll have to play with SynStack() to get the correct syntax groups.

2. Reflexion

   With the info we have gathered so far, it's obvious that the tag name (['htmlTagName']) can be styled independtly from the rest of the tag but it doesn't seem doable to highlight the = differently. Because it is part of the same syntax group as <>, the = will necessarilly be highlighted the same.

   We have 2 possibilities:

   a. <, = and > are the same colour while div is different.

   b. <, div, = and > are all the same colour.

   The original theme followed path a which I didn't like, so I had to customize it a little (path b) with the few lines in my answer to the previous question:

   hi htmlTag            guifg=#90b0d1 gui=NONE 
   hi htmlSpecialTagName guifg=#90b0d1 gui=NONE 
   hi htmlTagName        guifg=#90b0d1 gui=NONE  
   hi htmlEndTag         guifg=#90b0d1 gui=NONE

   As it is, having the = coloured differently than <> is not possible. If we want to colorize the = we are going to edit the HTML syntax file and your colorscheme, cowboy style.

3. Action

   The first step is to make a local copy of the default HTMl syntax file:

   $ cp /usr/share/vim/vim73/syntax/html.vim ~/.vim/syntax/html.vim

   The next step is to edit this file. We are going to perform two changes:

   1. add the definition of the htmlEqualSign syntax group

      Line 44 should be (Attention! Not thoroughly tested.):

      syn match htmlEqualSign contained "="

   2. add htmlEqualSign to the htmlTag group

      Line 40 of ~/.vim/syntax/html.vim should be changed from:

      syn region htmlTag start=+<[^/]+end=+>+contains=htmlTagN,htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent,htmlCssDefinition,@htmlPreproc,@htmlArgCluster

      to:

      syn region htmlTag start=+<[^/]+end=+>+contains=htmlTagN,htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent,htmlCssDefinition,@htmlPreproc,@htmlArgCluster,htmlEqualSign
      

   The last step is to edit your colorscheme so that it colorizes = the way you want. You do that by adding this line somewhere in your colorscheme:

   hi htmlEqualSign guifg=#00ff00

   With the color of your choice, of course.

   But I think that you want = to be the same color as id (that's not very clear from your question). For that, we are going to "link" the htmlEqualSign group to the one being used for attributes. Again, :call SynStack() is of great help: the syntax group for attributes is htmlArg so the line to add to your colorscheme would be:

   hi link htmlEqualSign htmlArg