zencoding-vim-master.zip

*zencoding.txt* ZenCoding for Vim ------------------------------------------------------- ZenCoding: vim plugins for HTML and CSS hi-speed coding ------------------------------------------------------- Author: Yasuhiro Matsumoto <mattn.jp@gmail.com> WebSite: http://mattn.kaoriya.net/ Repository: http://github.com/mattn/zencoding-vim Site: http://mattn.github.com/zencoding-vim License: BSD style license ============================================================================== CONTENTS *zencoding-contents* Introduction |zencoding-introduction| Install |zencoding-install| Tutorial |zencoding-tutorial| 1. Expand Abbreviation |zencoding-expandabbr| 2. Wrap with Abbreviation |zencoding-wrap-wtih-abbreviation| 3. Balance Tag Inward |zencoding-balance-tag-inward| 4. Balance Tag Outward |zencoding-balance-tag-outward| 5. Go to Next Edit Point |zencoding-goto-next-point| |<C-Y>n| 6. Go to Previous Edit Point |zencoding-goto-previous-point| 7. Update <img> Size |zencoding-update-image-size| 8. Merge Lines |zencoding-merge-lines| 9. Remove Tag |zencoding-remove-tag| 10. Split/Join Tag |zencoding-split-join-tag| 11. Toggle Comment |zencoding-toggle-comment| 12. Make anchor from URL |zencoding-make-anchor-url| 13. Make quoted text from URL |zencoding-quoted-text-url| 14. Code Pretty |zencoding-code-pretty| Customize |zencoding-customize| 1. Key Mappings |zencoding-customize-keymappings| 2. Indent Size |zencoding-indent-size| 3. Define Tag's Behavior |zencoding-define-tags-behavior| 4. Complete Tag |zencoding-complete-tag| Links |zencoding-links| ToDo |zencoding-todo| ============================================================================== INTRODUCTION *zencoding-introduction* *zencoding* |ZenCoding| is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions?similar to CSS selectors?into HTML code: > div#page>div.logo+ul#navigation>li*5>a < ...can be expanded into: > <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> < Read more about current Zen Coding syntax http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn Abbreviation engine has a modular structure which allows you to expand abbreviations into different languages. Zen Coding currently supports CSS, HTML, XML/XSL and HAML, Slim languages via filters. ============================================================================== INSTALL *zencoding-install* Install the distributed files into Vim runtime directory which is usually ~/.vim/, or $HOME/vimfiles on Windows. If you install pathogen that provided from Tim Pope, you should extract the file into 'bundle' directory. ============================================================================== TUTORIAL *zencoding-tutorial* If you are seeing this file as :help, then you can't edit this file. You should copy this section and create new buffer, paste and write as 'zencoding-tutor.txt'. Formally, open the file to start tutorial. 1. Expand Abbreviation *zencoding-expandabbr* *<C-Y>,* 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 *zencoding-wrap-wtih-abbreviation* *v_<C-Y>,* 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 *zencoding-balance-tag-inward* *<C-Y>d* To select inward of ul tag, type |<C-Y>d| in insert mode. > <ul> * <li class="list1"></li> <li class="list2"></li> <li class="list3"></li> </ul> < If cursor is at '*', |<C-Y>d| select from begin of <ul> to end of </ul>. If cursor is at first of <li>, it select <li class="list1"></li>. 4. Balance Tag Outward *zencoding-balance-tag-outward* *<C-Y>D* To select outward of ul tag, insert mode, type <C-Y>D in insert mode. > <ul> * <li class="list1"></li> <li class="list2"></li> <li class="list3"></li> </ul> < If cursor is at '*', |<C-Y>D| select from next letter of <ul> to previous letter of </ul>. If cursor is at first of <li>, it select <li class="list1"></li>. 5. Go to Next Edit Point *zencoding-goto-next-point* *<C-Y>n* To jump next point that need to edit, type |<C-Y>n| in insert mode. > * <div id="foo" class="">foo</div> <div id="bar" class="bar"></li> < If cursor is at '*', |<C-Y>n| move a cursor into attribute value of div specified id as 'foo'. And type again |<C-Y>n| move a cursor into inner of div specified id as 'bar'. 6. Go to Previous Edit Point *zencoding-goto-previous-point* *<C-Y>N* To jump previous point that need to edit, type |<C-Y>N| in insert mode. > <div id="foo" class="">foo</div> <div id="bar" class="bar"></li> * < If cursor is at '*', |<C-Y>N| move a cursor into div specified id as 'bar'. And type again |<C-Y>N| move a cursor into attribute value of 'foo'. 7. Update <img> Size *zencoding-update-image-size* *<C-Y>i* To expand or update size of image, type |<C-Y>i| on img tag > <img src="foo.png" /> < Type '<c-y>i' on img tag > <img src="foo.png" width="32" height="32" /> < If you change image, then type it again. it will be following. > <img src="foo-48.png" width="32" height="48" /> < 8. Merge Lines *zencoding-merge-lines* To join multi line text like following, type |J|. > <ul> <li class="list1"></li> <li class="list2"></li> <li class="list3"></li> </ul> < If you select part of line include <li> and type |<C-Y>m|, it will be following. > <ul> <li class="list1"></li><li class="list2"></li><li class="list3"></li> </ul> < 9. Remove Tag *zencoding-remove-tag* *<C-Y>k* To remove tag in the block, type |<C-Y>k|. > <div class="foo"> <a>cursor is here</a> </div> < Type |<C-Y>k| in insert mode, then > <div class="foo"> </div> < And type |<C-Y>k| in there again, then div will be removed. 10. Split/Join Tag *zencoding-split-join-tag* *<C-Y>j* To join block, type |<C-Y>j|. > <div class="foo"> cursor is here </div> < Type |<C-Y>j| in insert mode. then, > <div class="foo"/> < And type |<C-Y>j| in there again. > <div class="foo"> </div> < 11. Toggle Comment *zencoding-toggle-comment* *<C-Y>/* 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