zencoding.vim メモ
- mattn 氏 (twitter: @mattn)
- zencoding.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