A Vim Plugin That Always Highlights the Enclosing Tags

Just recently I started editing HTML much more than I usually do¹ and I noticed Vim was missing an awesome feature Notepad++ had. The last time I used Notepad++ was many years ago, but I still remember it used to highlight the other tag in the pair when your cursor was inside one of them.

[For those who want to skip to the end, the plugin I built is called MatchTagAlways.]

Sure enough, I wasn’t the only one who noticed that Vim was missing this awesome feature. A kind soul even took it upon himself to implement said missing functionality as a Vim plugin that does exactly what it says on the tin, and does it well.

But you know what? I want more than that.

I don’t want Vim to “just” highlight the other tag in the pair when my cursor is inside the tag, I want it to always highlight the tags that enclose the cursor. I’ve seen Sublime Text 2 trying to point out the enclosing tags with a dotted line, but I’ve also seen it fail in the face of unclosed tags common in HTML5 syntax.²

Here’s an animated GIF of what I’m talking about:

Do you see how the enclosing tags are always highlighted, even when you are inside the element’s content? That’s what I wanted.

So I wrote a plugin that does it. The GIF you just saw is MatchTagAlways in action. It’s plug & play, comes with sane defaults and should require no configuration (although there are knobs to tweak if you want to do that).

Implementing this is actually surprisingly tricky to get right if you want to support use-cases like templating languages and the aforementioned HTML5 syntax. There’s a ridiculous number of corner cases to handle, and MTA implements far too much of an HTML parser for my liking.³

Anyway, use it if you edit HTML or XML if this looks like a feature you’d like to have. Note that your copy of Vim needs to come with Python support. More details can be found in the plugin’s docs.