Search code examples
htmlvimphpstormsyntax-highlightingcolor-scheme

How can I get Vim HTML syntax highlighting to colour the whole tag?

As a PhpStorm user, one of the disappointing things I come across when I try using Vim is the way it does syntax highlighting in HTML:

enter image description here

Vim colours just the tagname and attributes,leaving the <, / and > in a different colour. What's the point of that? I find this distracting compared to the view I get in PhpStorm:

enter image description here

(Ignore the different colour scheme.) I find it harder to read code with all those < and > characters. How I can modify Vim to do this?

I'm using the monokai colour scheme for Vim.

Solution

  • You don't need to modify the HTML syntax itself - this can all be done by overriding the default links. syntax/html.vim defines syntax groups for the various HTML elements, and (at the end of the script) then links those to certain highlight groups, the appearance of which is determined by your colorscheme. If you establish a different link (in your ~/.vimrc), this will be honored. So, to make the entire tag appear like the tag name, use this:

    highlight link htmlTag htmlTagName
highlight link htmlEndTag htmlTagName