markdown-it demo

clear permalink

### [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>
```

html source debug