Over a million developers have joined DZone.

Vim and HTML Tags with the Surround Plugin

· Java Zone

Learn more about how the Java language, tools and frameworks have been the foundation of countless enterprise systems, brought to you in partnership with Salesforce.

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.

Discover how the Force.com Web Services Connector (WSC) is a code-generation tool and runtime library for use with Force.com Web services, brought to you in partnership with Salesforce.

Topics:

Published at DZone with permission of Lorna Mitchell, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}