zencoding.vim メモ

Vim

チュートリアルおもしろい

zencoding のほとんどの機能を vim に移植してしまっている、うゎっふ。
数ある入力方法の中でよく使うのを下記にメモ。
zencoding.vim やxmledit.vim でさくさくhtml を構築できますっゎ。

insert 編

HTML5
html:5

<!DOCTYPE HTML>
<html lang="jp">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        実行後のかーそる位置はここ
    </body>
</html>

insert 中に 上部コードを入力して [Ctrl-y],(コンマ) で実行される。
下記も同様になるので、 [Ctrl-y], 等の表記は省く。

タグつくる
div

<div></div>
子作り
div>p

<div>
    <p></p>
</div>
3つ子
div>p*3

<div>
    <p></p>
    <p></p>
    <p></p>
</div>
3つ子にclass
div>p.hoge*3

<div>
    <p class="hoge"></p>
    <p class="hoge"></p>
    <p class="hoge"></p>
</div>
3つ子に連番id
div>p#hoge$*3

<div>
    <p id="hoge1"></p>
    <p id="hoge2"></p>
    <p id="hoge3"></p>
</div>
3つ子に連番id、aタグ挿入
div>p#hoge$*3>a

<div>
    <p id="hoge1">
        <a href=""></a>
    </p>
    <p id="hoge2">
        <a href=""></a>
    </p>
    <p id="hoge3">
        <a href=""></a>
    </p>
</div>

visual 編

選択行を li にしてしまう
<!-- before -->
hoge1
hoge2
hoge3

<!-- after -->
<ul>
    <li>hoge1</li>
    <li>hoge2</li>
    <li>hoge3</li>
</ul>

これは visual で行うもの。
hog1 〜 hoge3 の3行選択して次のコマンド実行

Tag: ul>li*
リンクはる
<!-- before -->
http://bigchu.com

<!-- after -->
<a href="http://bigchu.com"></a>

insert でも visual でも可能
http:// から始まる文字列 の上に [c-y]a