From 17dfb732a80fa2745c0e451d01c928c24eca5719 Mon Sep 17 00:00:00 2001 From: mattn Date: Thu, 18 Nov 2010 12:32:06 +0900 Subject: [PATCH] add doc. --- doc/zencoding.txt | 383 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 383 insertions(+) create mode 100644 doc/zencoding.txt diff --git a/doc/zencoding.txt b/doc/zencoding.txt new file mode 100644 index 0000000..14eb904 --- /dev/null +++ b/doc/zencoding.txt @@ -0,0 +1,383 @@ +*zencoding.txt* ZenCoding for Vim + + ------------------------------------------------------- + ZenCoding: vim plugins for HTML and CSS hi-speed coding + ------------------------------------------------------- + +Author: Yasuhiro Matsumoto +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| |n| + 6. Go to Previous Edit Point |zencoding-goto-previous-point| + 7. Update 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| +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| +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: +> +
+ + +
+< +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 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* *,* + + Type abbreviation as 'div>p#foo$*3>a' and type |,|. +> +
+

+ +

+

+ +

+

+ +

+
+< +2. Wrap with Abbreviation *zencoding-wrap-wtih-abbreviation* *v_,* + + Write as below. +> + test1 + test2 + test3 +< + Then do visual select(line wize) and type |,|. + If you request 'Tag:', then type 'ul>li*'. +> +
    +
  • test1
    • +
  • test2
    • +
  • test3
    • +
+< + If you type tag as 'blockquote', then you'll see as following. +> +
+ test1 + test2 + test3 +
+< +3. Balance Tag Inward *zencoding-balance-tag-inward* *d* + + To select inward of ul tag, type |d| in insert mode. +> +
    + *
  • +
  • +
  • +
+< + If cursor is at '*', |d| select from begin of
    to end of
. + If cursor is at first of
  • , it select
  • . + +4. Balance Tag Outward *zencoding-balance-tag-outward* *D* + + To select outward of ul tag, insert mode, type D in insert mode. +> +
      + *
    • +
    • +
    • +
    +< + If cursor is at '*', |d| select from next letter of
      to previous + letter of
    . + If cursor is at first of
  • , it select
  • . + +5. Go to Next Edit Point *zencoding-goto-next-point* *n* + + To jump next point that need to edit, type |n| in insert mode. +> + *
    foo
    +
    +< + If cursor is at '*', |n| move a cursor into attribute value of div + specified id as 'foo'. And type again |n| move a cursor into inner of + div specified id as 'bar'. + +6. Go to Previous Edit Point *zencoding-goto-previous-point* *N* + + To jump previous point that need to edit, type |N| in insert mode. +> +
    foo
    +
    * +< + If cursor is at '*', |N| move a cursor into div specified id as 'bar'. + And type again |N| move a cursor into attribute value of 'foo'. + +7. Update Size *zencoding-update-image-size* *i* + + To expand or update size of image, type |i| on img tag +> + +< + Type 'i' on img tag +> + +< + If you change image, then type it again. it will be following. +> + +< +8. Merge Lines *zencoding-merge-lines* + + To join multi line text like following, type |J|. +> +
      +
    • +
    • +
    • +
    +< + If you select part of line include
  • and type |J|, it will be following. +> +
      +
    • +
    +< +9. Remove Tag *zencoding-remove-tag* *k* + + To remove tag in the block, type |k|. +> +
    + cursor is here +
    +< + Type |k| in insert mode, then +> +
    + +
    +< + And type |k| in there again, then div will be removed. + +10. Split/Join Tag *zencoding-split-join-tag* *j* + + To join block, type |j|. +> +
    + cursor is here +
    +< + Type |j| in insert mode. then, +> +
    +< + And type |j| in there again. +> +
    +
    +< +11. Toggle Comment *zencoding-toggle-comment* */* + + Move cursor to block +> +
    + hello world +
    +< + Type '/' in insert mode. +> + +< + Type '/' in there again. +> +
    + hello world +
    +< +12. Make anchor from URL *zencoding-make-anchor-url* *a* + + Move cursor to URL +> + http://www.google.com/ +< + Type |a| +> + Google +< +13. Make quoted text from URL *zencoding-quoted-text-url* *A* + + Move cursor to URL +> + http://github.com/ +< + Type |A| +> +
    + Secure source code hosting and collaborative development - GitHub
    +

    How does it work? Get up and running in seconds by forking a project, pushing an existing repository...

    + http://github.com/ +
    +< +============================================================================== +CUSTOMIZE *zencoding-customize* + +1. Key Mapping *zencoding-customize-keymappings* + + To specify leading key for expanding or balance tag, or for all, + Add this line in your vimrc: > +> + let g:user_zen_leader_key = '' +< + Or if you prefer to map for each actions, then you set each variables. + + 'user_zen_expandabbr_key' + 'user_zen_expandword_key' + 'user_zen_balancetaginward_key' + 'user_zen_balancetagoutward_key' + 'user_zen_next_key' + 'user_zen_prev_key' + 'user_zen_imagesize_key' + 'user_zen_togglecomment_key' + 'user_zen_splitjointag_key' + 'user_zen_removetag_key' + 'user_zen_anchorizeurl_key' + 'user_zen_anchorizesummary_key' + +2. Indent Size *zencoding-indent-size* + + To change indent size of html, add this code in your vimrc. +> + let g:user_zen_settings = { + \ 'html' : { + \ 'indentation' : ' ' + \ }, + \} +< + If you prefer to change global indent size then add this. +> + let g:user_zen_settings = { + \ 'indentation' : ' ' + \} +< +3. Define Tag's Behavior *zencoding-define-tags-behavior* + + zencoding.vim can change behavior of expanding abbreviation for each + filetypes as |Dictionary|. for details, see official site of zencoding. + for example, vimmer can add following. +> + let g:user_zen_settings = { + \ 'lang' : 'ja', + \ 'html' : { + \ 'filters' : 'html', + \ 'indentation' : ' ' + \ }, + \ 'perl' : { + \ 'indentation' : ' ', + \ 'aliases' : { + \ 'req' : "require '|'" + \ }, + \ 'snippets' : { + \ 'use' : "use strict\nuse warnings\n\n", + \ 'w' : "warn \"${cursor}\";", + \ }, + \ }, + \ 'php' : { + \ 'extends' : 'html', + \ 'filters' : 'html,c', + \ }, + \ 'css' : { + \ 'filters' : 'fc', + \ }, + \ 'javascript' : { + \ 'snippets' : { + \ 'jq' : "$(function() {\n\t${cursor}${child}\n});", + \ 'jq:each' : "$.each(arr, function(index, item)\n\t${child}\n});", + \ 'fn' : "(function() {\n\t${cursor}\n})();", + \ 'tm' : "setTimeout(function() {\n\t${cursor}\n}, 100);", + \ }, + \ }, + \ 'java' : { + \ 'indentation' : ' ', + \ 'snippets' : { + \ 'main': "public static void main(String[] args) {\n\t|\n}", + \ 'println': "System.out.println(\"|\");", + \ 'class': "public class | {\n}\n", + \ }, + \ }, + \} +< +4. Complete Tag *zencoding-complete-tag* + + If you want to complete tags using |ominifunc| then add this. +> + let g:use_zen_complete_tag = 1 +< +============================================================================== +TODO *zencoding-todo* + * wrapping inline selected. + * more documents. + * more contributor. + * more time to improve zencodig.vim. + +============================================================================== +vim:tw=78:ts=8:ft=help:norl:noet:fen:fdl=0: