213 lines
4.2 KiB
Plaintext
Executable File
213 lines
4.2 KiB
Plaintext
Executable File
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 '<c-y>m'
|
|
---------------------
|
|
<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>k' 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. Installing zencoding.vim for language you using.
|
|
|
|
# cd ~/.vim
|
|
# unzip zencoding-vim.zip
|
|
|
|
or if you install pathogen.vim:
|
|
|
|
# cd ~/.vim/bundle # or make directory
|
|
# unzip /path/to/zencoding-vim.zip
|
|
|
|
if you get sources from repository:
|
|
|
|
# cd ~/.vim/bundle # or make directory
|
|
# git clone http://github.com/mattn/zencoding-vim.git
|
|
|
|
15. Enable zencoding.vim for language you using.
|
|
|
|
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',
|
|
\ },
|
|
\}
|
|
---------------------
|