Can Vim highlight matching HTML tags like Notepad++?

184
votes

Vim has support for matching pairs of curly brackets, parentheses, and square brackets. This is great for editing C-style languages like PHP and JavaScript. But what about matching HTML tags?

Notepad++ has had this feature for as long as I’ve been using it. Being able to spot where blocks of HTML begin and end is very useful. What I’m looking for is something like this for Vim (see the green div tags):

Example of matching HTML tags highlighting

A bonus feature: highlighting unclosed HTML tags, like the red tag in the above screenshot.

matchit has been proposed as the next-best-thing, but it requires an extra keystroke to use its functionality. I’d like be able to see where the blocks of HTML begin and end without an extra keypress.

I’ve trawled the internet to find something like this for Vim. Apparently, I’m not the only one, according to two other StackOverflow questions and a Nabble thread.

I’ve almost resigned myself to Vim not being able to visually match HTML tags. Is it possible for Vim to do this?

Addendum: If it is not currently possible to do this with any existing plugins, does any Vimscript wizard out there have any pointers on how to approach writing a suitable plugin?

3
htmlnotepad++vim
Could you explain in what way this feature "is very useful"? I don't really need to know everything on everything at every moment. When I need to know something Vim is designed to make it very easy to know in very few keystrokes. - romainl
While I don't need to know everything, being able to easily know when an HTML tag ends allows me to grok the structure of the file I'm working with. I also deal with a lot of badly-written code, so sometimes I'll encounter a html tag with no closing tag, which always needs to be fixed. - linqq
@romainl I read your answer very often and I really like your point of view. But this time I have to disagree. I can consider this feature not essential but I find that this is a pretty nice question. It looks strange to mine that there isn't an easy way to get it with Vim. - lucapette
@lucapette, thank you. I like the question too, actually. I've never used such a feature and I've never felt the need for it. But it's probably one of those things you can't live without once you try. I like my workflow and workspace clean and focused, free from "administrative debris" and I think such a feature might be superfluous. The perfect candidate for a plugin. One may try to take inspiration from matchit as a starting point, probably. - romainl
Have you seen this answer? stackoverflow.com/questions/1957083/… - Greg Sexton

3 Answers

224
votes

I had to work with some HTML today so thought I would tackle this. Added a ftplugin to vim.org that should solve your problem.

You can get it here on vim.org.

You can get it here on github.

Hope it works for you. Let me know if you have any problems.

101
votes

Greg's MatchTag.vim plugin is awesome, but I wanted something more. I wanted the enclosing tags to always be highlighted, not just when the cursor is on one of the tags.

So I wrote MatchTagAlways which does everything that Greg's MatchTag does and also always highlights the enclosing tag, no matter where the cursor is in the code. It also works with unclosed tags and HTML templating languages like Jinja or Handlebars.

Here's a GIF showing it in action:

MTA in action

-2
votes

I came here looking for matching html style angle brackets in Vim. This seems to work:

:set mps+=<:>
:help matchpairs