Vim Essential Plugin: Surround


Surround.vim, by Tim Pope, is easily one of the most useful plugins available. As the name suggests, it allows you to surround, update, and delete wrapping characters and tags with ease!


Let's say you have the string "Hello World." If we want to wrap the word, "World," within an <em> tag, we can type: viws<em>. This stands for "move into visual mode, select the inner word, and then surround it with an <em> tag."

Hello <em>World</em>

But let's say that we later change our mind, and wish to change the wrapping <em> to a <strong> tag instead. With the surround plugin, that's a cinch: cst<strong>. Again, this means: "Change the surround tag to an <strong>."

Hello <strong>World</strong>

But, ya know, we can never make up our mind. A day later, we decide to remove the wrapping element all together. Rather than using the clumsy mouse to highlight and delete the tags, let's type three characters and be done with it: dst, or delete surrounding tag.

Hello World

One More Example

Next, let's imagine that we have a word that needs to be wrapped in an anchor tag:


Well that's an easy one: viws<a href="">. Switch to visual mode, select the inner word, and surround it with an anchor tag, which links to

<a href="">Link</a>

Be sure to review the video for more examples. I guarantee that you'll find this plugin to be one of the most useful extensions available for Vim.

Related Posts
  • Computer Skills
    OS X
    Introducing Markdown on OS XMarkdown
    Markdown is a popular formatting syntax that lets you easily write plain text that can be converted into a number of other formats; mainly HTML. In this tutorial I will show you how to use the Markdown syntax on OS X.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    The Truth About Multiple H1 Tags in the HTML5 EraH1 retina
    Whether you're a webmaster or a web designer, there's a question you've most likely either asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly should I implement them?"Read More…
  • Web Design
    Adding Ghost Template Tags and MarkupGhost template retina
    Welcome to the third part in our series on building a theme for Ghost. This instalment will take you through the remaining steps needed to finalize your theme's templates.Read More…
  • Web Design
    A Web Designer's Typographic BoilerplateB
    I like to use a typography.css in my projects; a separate file which houses all the basic structural typographic styles I'll need. A lot of what's found within it is obvious stuff (heading sizes, for example) but it also contains less obvious things which I don't want to forget. Let's work our way through the checklist..Read More…