Vim and HTML Tags with the Surround Plugin

Marking up documents is always tedious, and usually there are shortcuts available. My favourite document format tool is Pandoc, literally a box of document-conversion tricks! Today though I was not so lucky so I marked up a plain text file as HTML by hand … or rather, using my favourite vim tricks so I thought I’d share them.

Vim Plugins

Two plugins in particular helped me today:

  • surround.vim which works very nicely with quotes and brackets as well as tags
  • repeat.vim allows you to repeat complex actions rather than just the last keystroke combination

I use pathogen and git submodules to manage my plugins so I installed them in my .vim/ directory with:

git submodule add git submodule add git:// bundle/surround
git submodule add git submodule add git:// bundle/repeat

With both of these in place, I can quickly mark up my plain text document with HTML tags. I was wrapping whole lines in tags, so I used commands like this:

  • To add a

    around this line: yss<h1>

  • To add a

    around this line: yss<li>

  • To add a

    around a bunch of lines, highlight them with Shift+V and moving, then do: S<ul>

The plugin understands tags and so will close your HTML (or XML) tag for you at the end of the line or selection – very neat!

With these and the ability to press dot to repeat what I just did but on another line, it was quicker to mark up my document than I expected. Since I’ll be doing more HTML in future than I have until this point, I thought I’d write down some hints here so I can refer back to them.

I also found this article very helpful:, and it’s the first in a whole series about handy vim plugins.

3 thoughts on “Vim and HTML Tags with the Surround Plugin

  1. Just a heads-up: you need to change your HTML tags to use HTML entities inside the “pre” tags in this post — I had to view source to see what you were intending. :)

    Thanks for the tip — got me to upgrade my ancient vim-surround install and finally get HTML tag completion!

Leave a Reply

Please use [code] and [/code] around any source code you wish to share.

This site uses Akismet to reduce spam. Learn how your comment data is processed.