Can Vim highlight matching HTML tags like Notepad++?

html notepad++ vim

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):

https://i.stack.imgur.com/swLB4.png

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?

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.

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.

@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, 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.

Have you seen this answer? stackoverflow.com/questions/1957083/…

Greg Sexton

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.

Thank you! That's exactly the functionality I'm looking for. Only two minor quibbles, if you feel like fixing them: 1. Currently, only the opposite tag is matched. Would it be possible to also match the tag that the cursor is on? 2. Currently, if a html tag has attributes, those are selected as well. Is it possible only to select the tag name, without attributes?

Good suggestions. They should both be taken care of in v1.2 up on vim.org. The matching regex is more complicated now so let me know if you find any bugs.

As requested, I've added this ftplugin to github. See my updated answer for the link.

@GregSexton you're officially an hero now ;)

Just found this, looks good, but note that I had to add "filetype plugin on" to my ~/.vimrc to get it to turn on. If it's not working after you place the plugin in your ftplugin folder, add the above to your ~/.vimrc and you should be all set.

Lekensteyn

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:

https://i.imgur.com/qAf0N.gif

Cool solution- I'd probably use the original version, but I can see how this is helpful. I wish more answers had GIF demos, that's awesome!

Totally agree with Jason, +1 for amazing GIF hacks.

This works better than the accepted answer. But I am still unsure how to verify tags that beyond the vertical screen height. I can't move the screen past the cursor in vim and a split screen doesn't show the active tags in both windows.

You absolute legend, my life has become so much better from this... <3

This is lot better than bounty answer

Chris X

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

:set mps+=<:>
:help matchpairs

This method is not the solution, it just let '<' match to '>'

Can Vim highlight matching HTML tags like Notepad++?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US