Over a million developers have joined DZone.

Vim and HTML Tags with the Surround Plugin

DZone 's Guide to

Vim and HTML Tags with the Surround Plugin

· Java Zone ·
Free Resource

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://github.com/tpope/vim-surround.git bundle/surround
git submodule add git submodule add git://github.com/tpope/vim-repeat.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

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: http://www.catonmat.net/blog/vim-plugins-surround-vim/, and it's the first in a whole series about handy vim plugins.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}