Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力
Vim プラグインの Sparkup (rstacruz’s sparkup at master – GitHub) で、CSS セレクタ風の記述から HTML タグ文字列を入力することができる。（zen-coding 風の入力）
プラグインのインストールは上記サイトからダウンロードしたファイル内の vim/ftplugin/ 内のファイルを ~/.vim/ftplugin/ にコピーする。
プラグインの実行には python2.5 以上が必要。
<c-e> を押すことで、タグキーワード（div, h1, img, meta 等）から開始タグ・終了タグ・各種属性を自動で入力できる。
<c-n> を押すことでカーソルを次の入力位置に移動できる。
CSS 風のセレクタ表記を使ったショートカット文字列から HTML タグ文字列に展開される。
タグ単体の入力
タグキーワードを入力して <c-e> を押す。
div <= <c-e> を押す <div></div>
属性値を含めて入力
id の場合は # 、class の場合は . でタグキーワードと属性値を繋ぐ。
タグを省略した場合は div タグとして処理される。
div#hoge.foo <= id が hoge, class が foo の div タグ <div class="foo" id="hoge"></div>
その他の属性値の場合は属性名を指定する。
a[href=http://www.google.com/].foo#hoge <= id が hoge, class が foo の Google へのリンク <a href="http://www.google.com/" class="foo" id="hoge"></a> img[width][height][title=テスト] <= width, height 属性を持ち title テキストが"テスト"の img タグ <img width="" src="" height="" alt="" title="テスト" />
タグに囲まれたテキスト
タグに囲まれたテキストは {} で囲んだテキストを繋ぐ。
a[href]{This is link test}
<a href="">This is link test</a>
子要素を含めて入力
子要素を含めて入力する場合は、子要素を > で繋ぐ。
div > span.wrap <= class が wrap の span タグを子要素に持つ div タグ <div> <span class="wrap"></span> </div>
要素を連続して入力
要素を連続して複数入力する場合は、要素名の後に *n のようにして * と要素数を記述する。
select > option*4 <= 4つの option タグを持つ select タグを入力 <select name=""> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select>
連続して入力するタグに連番を使った処理を加える
連続して入力するタグに $ の記述を追加すると連番に展開される。
select > option[value=$].item-$*5 <= 5つの option タグの value と class に連番を加える <select name=""> <option class="item-1" value="1"></option> <option class="item-2" value="2"></option> <option class="item-3" value="3"></option> <option class="item-4" value="4"></option> <option class="item-5" value="5"></option> </select>
隣接した異るタグを入力する
同じ階層の隣接した異なるタグ（タグ自身や属性の相違）を続けて入力するには + で各タグを繋いていく。
p.foo + p.hoge + img <p class="foo"></p> <p class="hoge"></p> <img src="" alt="" />
階層を1つ上に戻す
< を使うことで1度掘り下がった階層を1つ上に戻すことができる。
div > ul > li.items*3 < p.foot < #foot <div> <ul> <li class="items"></li> <li class="items"></li> <li class="items"></li> </ul> <p class="foot"></p> </div> <div id="foot"></div>
少し複雑なテーブルを作る
table[border=1] > tr*3 > th.title{TITEL} + td*2{CONTENTS} + td.foot{FOOTER} < tr > th.foot[colspan=4]{FOOTER}
<table cellspacing="0" border="1">
<tr>
<th class="title">TITEL</th>
<td>CONTENTS</td>
<td>CONTENTS</td>
<td class="foot">FOOTER</td>
</tr>
<tr>
<th class="title">TITEL</th>
<td>CONTENTS</td>
<td>CONTENTS</td>
<td class="foot">FOOTER</td>
</tr>
<tr>
<th class="title">TITEL</th>
<td>CONTENTS</td>
<td>CONTENTS</td>
<td class="foot">FOOTER</td>
</tr>
<tr>
<th colspan="4" class="foot">FOOTER</th>
</tr>
</table>
| TITEL | CONTENTS | CONTENTS | FOOTER |
|---|---|---|---|
| TITEL | CONTENTS | CONTENTS | FOOTER |
| TITEL | CONTENTS | CONTENTS | FOOTER |
| FOOTER | |||
HTML タグ・テンプレートの入力
各 DOCTYPE 宣言を含んだ HTML タグ・テンプレート を入力する。
html: の後に各 DOCTYPE 宣言のショートカット文字列(type)を記述する。
html:type
各 DOCTYPE 宣言とショートカットの一覧
- HTML 4.01 Transitional
html:4t- HTML 4.0.1 Strict
html:4s- XHTML 1.0 Transitional
html:xt- XHTML 1.0 Strict
html:xs- XHTML 1.1
html:xxs- HTML 5
html:5
入力例
以下の例では lang 属性が ja になるように ~/vim/ftplugin/html/sparkup.py ファイルを修正している。
html:5 <c-e> を押すと以下のタグが入力される <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> </body> </html>
IE 用条件付きコメント分岐タグ
cc: の後に IE の各バージョンを表わす文字列(type)を記述する。
cc:type
IE の各バージョンとショートカットの一覧
- IE （全てのバージョン）
cc:ie- IE6 以下
cc:ie6- IE7 以下
cc:ie7- IE以外
cc:noie
入力例
cc:ie <c-e> を押すと以下のタグが入力される <!--[if IE]><![endif]-->
その他
その他、入力フォーム・メタタグ・スクリプトタグの入力ショートカットや、入力ショートカットの省略形などが定義されている。
詳細は ~/.vim/ftplugin/html/sparkup.py のコードを参照する。
追記：コードを参照してショートカットを調べるのが面倒なので vim のヘルプファイルを作りました。
sparkup-keys-help.zip
追記：CSS 用の Zen Coding Vim Script を作りました。zencodingcss.vim (Vim Scirpt)
参考サイト：rstacruz’s sparkup at master – GitHub
YouTube – Sparkup with MacVIM