zencoding.vim メモ

http://bigchu.com/
http://twitter.com/bigchu
http://foursquare.com/user/bigchu
Google Wave: bigchu.com[at]googlewave.com

mattn 氏 (twitter: @mattn)
zencoding.vim

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

Tutorial

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

Permalink | コメント(2) | トラックバック(0) | 14:14

コメントを書く

とうま 2010/03/17 02:29 [Ctrl-y],　←コンマ必要っす

bigchu 2010/03/17 07:30 おっと、ご指摘ありがとうございます！

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください

画像認証

トラックバック - http://d.hatena.ne.jp/bigchu/20100316/1268716495

リンク元

酒は血液、呑んだら献血

2010.03.16