439 lines
13 KiB
Plaintext
Executable File
439 lines
13 KiB
Plaintext
Executable File
*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 URL *zencoding-make-anchor-url* *<C-Y>a*
|
|
|
|
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 *zencoding-quoted-text-url* *<C-Y>A*
|
|
|
|
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. Code Pretty *zencoding-code-pretty* *<C-Y>c*
|
|
|
|
Select code block, for example select following code from "int main()".
|
|
>
|
|
<p>Writing in C language</p>
|
|
|
|
int main() {
|
|
puts("hello world");
|
|
}
|
|
<
|
|
Type |<C-Y>c|
|
|
>
|
|
<p>Writing in C language</p>
|
|
|
|
<span class="Type">int</span> main() {<br />
|
|
puts(<span class="Constant">"hello world"</span>);<br />
|
|
}<br />
|
|
<
|
|
==============================================================================
|
|
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 = '<c-y>'
|
|
<
|
|
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 |omnifunc| then add this.
|
|
>
|
|
let g:use_zen_complete_tag = 1
|
|
<
|
|
|
|
5. Enable functions in different mode
|
|
|
|
If you want to use zencoding only in some modes, set an mode option:
|
|
|
|
let g:user_zen_mode='n' "only enable normal mode functions, or
|
|
let g:user_zen_mode='inv' "enable all functions, which is equal to
|
|
let g:user_zen_mode='a' "enable all function in all mode.
|
|
|
|
==============================================================================
|
|
LINKS *zencoding-links*
|
|
|
|
zen-coding official site:
|
|
http://code.google.com/p/zen-coding/
|
|
|
|
zencoding.vim:
|
|
http://mattn.github.com/zencoding-vim
|
|
|
|
development repository:
|
|
https://github.com/mattn/zencoding-vim
|
|
|
|
my blog posts about zencoding-vim:
|
|
http://mattn.kaoriya.net/software/vim/20100222103327.htm
|
|
http://mattn.kaoriya.net/software/vim/20100306021632.htm
|
|
|
|
japanese blog posts about zencoding-vim:
|
|
http://d.hatena.ne.jp/idesaku/20100424/1272092255
|
|
http://d.hatena.ne.jp/griefworker/20110118/vim_zen_coding
|
|
http://d.hatena.ne.jp/sakurako_s/20110126/1295988873
|
|
http://looxu.blogspot.jp/2010/02/zencodingvimhtml.html
|
|
|
|
tutorial traslated in chinese:
|
|
http://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html
|
|
|
|
==============================================================================
|
|
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:
|