CODEWITHSUNDEEP
htmlvimphpstormsyntax-highlightingcolor-scheme
And Finally
And Finally

Reputation: 5714

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.

Upvotes: 2

Views: 3367

Answers (2)

Ingo Karkat
Ingo Karkat

Reputation: 172758

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

Upvotes: 3

Brian Tiffin
Brian Tiffin

Reputation: 4126

Make a local copy of syntax/html.vim in ~/.vim/syntax/html.vim (where the first filename is your system install dir).

Experiment with changing the hilight group of htmlTag and htmlTagEnd (near the bottom of the syntax file) to match the hilight group of htmlTagName. I like the default, so I only experimented on a few files, and it didn't seem to break anything. Being the same colour, there shouldn't be anymore chevrons sticking it to your receptor cones.

Being such a simple minded test, this does likely break something somewhere, and you'll probably have to spend a few minutes with the other hilight groups to get a consistent look.

Upvotes: 1

Related Questions