4

I'm editing an HTML file, and my cursor is inside a tag, like this:

<textarea class="code-area"></textarea>

And I'm trying to wrap all of this tag inside a div tag, so that it'd be like this:

<div>
    <textarea class="code-area"></textarea>
</div>

I can use vim-surround and type yss<div>, but it'll change it into this:

  <div><textarea id="code-area"></textarea></div>

How can I wrap it so that it adds newlines as well?

Also, the yss<div> command only wraps the current line. I'm interested in wrapping an entire tag, no matter how many lines it has.

  • 2
    Does ySat<div> fit? – Matt Dec 24 '19 at 7:49
  • @Matt Yes, it does. Thank you. – Amir A. Shabani Dec 24 '19 at 7:52
6

In vim-surround ys{motion} puts "a surround text" on the same line. To place it on a line of its own with indent you should use yS{motion} instead.

Next, a motion you want for this case is :h at (a tag). So this results in ySat<div>

1

As you are surrounding single line you VS<div>

Let's break it down:

  • V enter visual by line select mode
  • S surround with...
  • <div>

Your y s s < d i v >

command didn't work as third letter which is s is something like substitute surrounding, while we want something like append a some tag t, as in @Matt's answer.

By the way, your y s s < d i v >
way useful while typing this answer for surrounding letters of yss<div> with <kbd> tag to look them like buttons.

Credit go to official Vim Surround Docs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.