Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
209 lines (170 sloc) 4.14 KB
Tutorial of zencoding.vim
mattn <mattn.jp@gmail.com>
1. Expand Abbreviation
Type abbreviation as 'div>p#foo$*3>a' and type '<c-y>,'.
---------------------
<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-y>,'.
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
type '<c-y>d' in insert mode.
4. Balance Tag Outward
type '<c-y>D' in insert mode.
5. Go to Next Edit Point
type '<c-y>n' in insert mode.
6. Go to Previous Edit Point
type '<c-y>N' in insert mode.
7. Update <img> Size
Move cursor to img tag.
---------------------
<img src="foo.png" />
---------------------
Type '<c-y>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-y>k' in insert mode.
---------------------
<div class="foo">
</div>
---------------------
And type '<c-y>j' in there again.
---------------------
---------------------
10. Split/Join Tag
Move cursor in block
---------------------
<div class="foo">
cursor is here
</div>
---------------------
Type '<c-y>j' in insert mode.
---------------------
<div class="foo"/>
---------------------
And type '<c-y>j' in there again.
---------------------
<div class="foo">
</div>
---------------------
11. Toggle Comment
Move cursor to block
---------------------
<div>
hello world
</div>
---------------------
Type '<c-y>/' in insert mode.
---------------------
<!-- <div>
hello world
</div> -->
---------------------
Type '<c-y>/' in there again.
---------------------
<div>
hello world
</div>
---------------------
12. Make anchor from URL
Move cursor to URL
---------------------
http://www.google.com/
---------------------
Type '<c-y>a'
---------------------
<a href="http://www.google.com/">Google</a>
---------------------
13. Make quoted text from URL
Move cursor to URL
---------------------
http://github.com/
---------------------
Type '<c-y>A'
---------------------
<blockquote class="quote">
<a href="http://github.com/">Secure source code hosting and collaborative development - GitHub</a><br />
<p>How does it work? Get up and running in seconds by forking a project, pushing an existing repository...</p>
<cite>http://github.com/</cite>
</blockquote>
---------------------
14. Enable zencoding.vim for language you using.
There are two ways to enable zencoding.vim for language you using.
1. Enable with filetype.
---------------------
# mkdir $HOME/.vim/ftplugin/php
# cp zencoding.vim $HOME/.vim/ftplugin/php/.
---------------------
2. Enable with zen_settings.
---------------------
# cp zencoding.vim $HOME/.vim/plugin/.
And you can customize the behavior of language you using.
# cat >> ~/.vimrc
let g:user_zen_settings = {
\ 'php' : {
\ 'extends' : 'html',
\ 'filters' : 'c',
\ },
\ 'xml' : {
\ 'extends' : 'html',
\ },
\ 'haml' : {
\ 'extends' : 'html',
\ },
\}
---------------------
Jump to Line
Something went wrong with that request. Please try again.