Tutorial of zencoding.vim

                                                    mattn <mattn.jp@gmail.com>

1. Expand Abbreviation

  Type abbreviation as 'div>p#foo$*3>a' and type '<c-z>,'.
  ---------------------
  <div>
      <p id="foo1">
          <a href=""></a>
      </p>
      <p id="foo2">
          <a href=""></a>
      </p>
      <p id="foo3">
          <a href=""></a>
      </p>
  </div>
  ---------------------

2. Wrap with Abbreviation

  Write as below.
  ---------------------
  test1
  test2
  test3
  ---------------------
  Then do visual select(line wize) and type '<c-z>,'.
  If you request 'Tag:', then type 'ul>li*'.
  ---------------------
  <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
  </ul>
  ---------------------

  If you type tag as 'blockquote', then you'll see as following.
  ---------------------
  <blockquote>
      test1
      test2
      test3
  </blockquote>
  ---------------------

3. Balance Tag Inward

  use surround.vim and type 'vit'


4. Balance Tag Outward

  use surrond.vim and type 'vat'

5. Go to Next

  type '<c-z>n' in insert mode.

6. Previous Edit Point

  type '<c-z>N' in insert mode.

7. Update <img> Size

  Move cursor to img tag.
  ---------------------
  <img src="foo.png" />
  ---------------------
  Type '<c-z>i' on img tag 
  ---------------------
  <img src="foo.png" width="32" height="48" />
  ---------------------

8. Merge Lines

  select the lines included '<li>'
  ---------------------
  <ul>
  	<li class="list1"></li>
  	<li class="list2"></li>
  	<li class="list3"></li>
  </ul>
  ---------------------
  and type 'J'
  ---------------------
  <ul>
  	<li class="list1"></li>
  	<li class="list2"></li>
  	<li class="list3"></li>
  </ul>
  ---------------------

9. Remove Tag

  Move cursor in block
  ---------------------
  <div class="foo">
  	<a>cursor is here</a>
  </div>
  ---------------------
  Type '<c-z>k' in insert mode.
  ---------------------
  <div class="foo">
  	
  </div>
  ---------------------
  And type '<c-z>j' in there again.
  ---------------------

  ---------------------

10. Split/Join Tag

  Move cursor in block
  ---------------------
  <div class="foo">
  	cursor is here
  </div>
  ---------------------
  Type '<c-z>j' in insert mode.
  ---------------------
  <div class="foo"/>
  ---------------------
  And type '<c-z>j' in there again.
  ---------------------
  <div class="foo">
  </div>
  ---------------------

11. Toggle Comment

  Move cursor to block
  ---------------------
  <div>
  	hello world
  </div>
  ---------------------
  Type '<c-z>/' in insert mode.
  ---------------------
  <!-- <div>
  	hello world
  </div> -->
  ---------------------

