zencode 教程
来源：互联网 发布：山东财经大学网络教学 编辑：程序博客网 时间：2024/06/06 09:41
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>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.git15. 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', \ }, \} ---------------------转自：https://raw.github.com/mattn/zencoding-vim/master/TUTORIAL
