Can Vim highlight matching HTML tags like Notepad++?

HtmlNotepad++Vim

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

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

Solution 3 - Html

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

:set mps+=<:>
:help matchpairs

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionlinqqView Question on Stackoverflow
Solution 1 - HtmlGreg SextonView Answer on Stackoverflow
Solution 2 - HtmlValloricView Answer on Stackoverflow
Solution 3 - HtmlChris XView Answer on Stackoverflow