This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
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
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
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.
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="http://url.com">. Switch to visual mode, select the inner word, and surround it with an anchor tag, which links to url.com.
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.