### [surround.vim](https://github.com/tpope/vim-surround)
It's easiest to explain with examples. Press `cs"'` inside
"Hello world!"
to change it to
'Hello world!'
Now press `cs'<q>` to change it to
<q>Hello world!</q>
To go full circle, press `cst"` to get
"Hello world!"
To remove the delimiters entirely, press `ds"`.
Hello world!
Now with the cursor on "Hello", press `ysiw]` (`iw` is a text object).
[Hello] world!
Let's make that braces and add some space (use `}` instead of `{` for no
space): `cs]{`
{ Hello } world!
Now wrap the entire line in parentheses with `yssb` or `yss)`.
({ Hello } world!)
Revert to the original text: `ds{ds)`
Hello world!
Emphasize hello: `ysiw<em>`
<em>Hello</em> world!
Finally, let's try out visual mode. Press a capital V (for linewise
visual mode) followed by `S<p class="important">`. 或者選擇後 `St` 輸入
```html
<p class="important">
<em>Hello</em> world!
</p>
```
This plugin is very powerful for HTML and XML editing, a niche which
currently seems underfilled in Vim land. (As opposed to HTML/XML
*inserting*, for which many plugins are available). Adding, changing,
and removing pairs of tags simultaneously is a breeze.
The `.` command will work with `ds`, `cs`, and `yss` if you install
[repeat.vim](https://github.com/tpope/vim-repeat).
**選擇並加上 Html Tag**
要使用 vim 的 surround 插件將選擇的內容加上 tag，你可以按照以下步驟進行：
1. 首先，確保你已經安裝了 vim-surround 插件。你可以通過在 vimrc 文件中添加引用來安裝它：
```vim
Plugin 'tpope/vim-surround'
```
2. 在你的 vim 編輯器中，使用 `v` 鍵來進入可視模式，然後選擇你要加上 tag 的內容。
3. 輸入 `S` 進入 surround 模式，然後輸入要加上的 tag，例如 `p` 可以加上 `<p>` 及 `</p>` tag。
4. 按下 `Esc` 退出 surround 模式，你會看到你選擇的內容現在已經被包裹在 tag 內。
舉例來說，假設你想要將下面這段文字加上 `<div>` 及 `</div>` tag：
```
Hello, World!
```
按照上述步驟，你可以進行以下操作：
1. 進入可視模式並選擇文字。
2. 輸入 `S<div>`。
3. 按下 `Esc`。
在這之後，你的文字將會變成以下格式：
```
<div>
Hello, World!
</div>
```