*emmet.txt*	Emmet for Vim

	   -------------------------------------------------------
	     Emmet: 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/emmet-vim
Site: http://mattn.github.com/emmet-vim
License: BSD style license

==============================================================================
CONTENTS                                                        *emmet-contents*

Introduction           |emmet-introduction|
Install                |emmet-install|
Tutorial               |emmet-tutorial|
  1. Expand Abbreviation            |emmet-expandabbr|
  2. Wrap with Abbreviation         |emmet-wrap-with-abbreviation|
  3. Balance Tag Inward             |emmet-balance-tag-inward|
  4. Balance Tag Outward            |emmet-balance-tag-outward|
  5. Go to Next Edit Point          |emmet-goto-next-point| |<C-Y>n|
  6. Go to Previous Edit Point      |emmet-goto-previous-point|
  7. Update <img> Size              |emmet-update-image-size|
  8. Merge Lines                    |emmet-merge-lines|
  9. Remove Tag                     |emmet-remove-tag|
 10. Split/Join Tag                 |emmet-split-join-tag|
 11. Toggle Comment                 |emmet-toggle-comment|
 12. Make anchor from URL           |emmet-make-anchor-url|
 13. Make quoted text from URL      |emmet-quoted-text-url|
 14. Code Pretty                    |emmet-code-pretty|
 15. Lorem Ipsum                    |emmet-lorem-ipsum|
Customize             |emmet-customize|
  1. Key Mappings                   |emmet-customize-keymappings|
  2. Indent Size                    |emmet-indent-size|
  3. Define Tag's Behavior          |emmet-define-tags-behavior|
  4. Complete Tag                   |emmet-complete-tag|
Links                 |emmet-links|
ToDo                  |emmet-todo|

==============================================================================
INTRODUCTION                                          *emmet-introduction* *emmet*

|Emmet| 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 Emmet syntax
  http://docs.emmet.io/abbreviations/

Abbreviation engine has a modular structure which allows you to expand
abbreviations into different languages. Emmet currently supports CSS,
HTML, XML/XSL and HAML, Slim languages via filters.

==============================================================================
INSTALL                                                          *emmet-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                                                        *emmet-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
'emmet-tutor.txt'. Formally, open the file to start tutorial.

1. Expand Abbreviation                                 *emmet-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                *emmet-wrap-with-abbreviation* *v_<C-Y>,*

  Write as below.
>
  test1
  test2
  test3
<
  Then do visual select(line wise) 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                          *emmet-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                        *emmet-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                          *emmet-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"></div>
<
  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                  *emmet-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"></div> *
<
  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                            *emmet-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                                               *emmet-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                                          *emmet-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                                 *emmet-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                                 *emmet-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                          *emmet-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                     *emmet-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                                       *emmet-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|
>
  <span class="Type">int</span>&nbsp;main() {<br />
  &nbsp;&nbsp;puts(<span class="Constant">&quot;hello world&quot;</span>);<br />
  }<br />
<
15. Lorem Ipsum                                              *emmet-lorem-ipsum*

  To insert dummy text.
>
  lorem
<
  Type |<C-Y>,|
>
  <div>Adipisicing asperiores deleniti ipsum fuga deserunt perferendis
  molestiae sunt excepturi aut quo nihil! Optio accusantium corporis molestiae
  deserunt ab, veritatis commodi. Eius nobis ab deserunt magni iure quo
  laboriosam laboriosam.</div>
<
  For japanese user, put like follow into your g:user_emmet_settings:
>
  let g:user_emmet_settings = {
    ...

    \  'custom_expands1' : {
    \    '^\%(lorem\|lipsum\)\(\d*\)$' : function('emmet#lorem#ja#expand'),
    \  },

    ...
<
  You will get japanese dummy text.
>
==============================================================================
CUSTOMIZE                                                      *emmet-customize*

1. Key Mapping                                     *emmet-customize-keymappings*

  To specify leading key for expanding or balance tag, or for all,
  Add this line in your vimrc: >
>
  let g:user_emmet_leader_key = '<c-y>'
<
  Note that a trailing ',' must be entered, so the resultant keymap is
  '<c-y>,'.
  
  If you prefer to map for each actions, then you set each variables.

    'user_emmet_expandabbr_key'
    'user_emmet_expandword_key'
    'user_emmet_balancetaginward_key'
    'user_emmet_balancetagoutward_key'
    'user_emmet_next_key'
    'user_emmet_prev_key'
    'user_emmet_imagesize_key'
    'user_emmet_togglecomment_key'
    'user_emmet_splitjointag_key'
    'user_emmet_removetag_key'
    'user_emmet_anchorizeurl_key'
    'user_emmet_anchorizesummary_key'

  Or if you want to use <plug> mappings

    emmet-expand-abbr
    emmet-expand-word
    emmet-balance-tag-inward
    emmet-balance-tag-outward
    emmet-move-next
    emmet-move-prev
    emmet-image-size
    emmet-toggle-comment
    emmet-split-join-tag
    emmet-remove-tag
    emmet-anchorize-url
    emmet-anchorize-summary
    emmet-merge-lines
    emmet-code-pretty

  So you can make the mapping affected only for a filetype you want.
>
  autocmd FileType css imap <tab> <plug>(emmet-expand-abbr)
<
2. Indent Size                                               *emmet-indent-size*

  To change indent size of html, add this code in your vimrc.
>
  let g:user_emmet_settings = {
  \  'html' : {
  \    'indentation' : ' '
  \  },
  \}
<
  If you prefer to change global indent size then add this.
>
  let g:user_emmet_settings = {
  \  'indentation' : ' '
  \}
<
3. Define Tag's Behavior                            *emmet-define-tags-behavior*

  Emmet.vim can change behavior of expanding abbreviation for each
  filetypes as |Dictionary|. For details, see official site of Emmet.
  for example, vimmer can add following.
>
  let g:user_emmet_settings = {
  \  'variables' : {
  \    '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                                             *emmet-complete-tag*

  If you want to complete tags using |omnifunc| then add this.
>
  let g:use_emmet_complete_tag = 1
<

5. Enable functions in different mode

  If you want to use Emmet only in some modes, set an mode option:

    let g:user_emmet_mode='n'    "only enable normal mode functions, or
    let g:user_emmet_mode='inv'  "enable all functions, which is equal to
    let g:user_emmet_mode='a'    "enable all function in all mode.

6. Adding custom snippets

If you have installed the |webapi|(https://github.com/mattn/webapi-vim) for
 |emmet| you can also add your own snippets using a custom "snippets.json" file.

Once you have installed the |webapi| add this line to your 'vimrc':
>
  let g:user_emmet_settings = webapi#json#decode(
  \  join(readfile(expand('~/.snippets_custom.json')), "\n"))
<
You can change the path to your snippets_custom.json according to your
preferences.

See http://docs.emmet.io/customization/snippets/

You can find instructions about creating your customized snippets.json file.

==============================================================================
LINKS                                                              *emmet-links*

Emmet official site:
  http://emmet.io/

zen-coding official site:
  http://code.google.com/p/zen-coding/

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 translated in Chinese:
  http://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html

==============================================================================
TODO                                                                *emmet-todo*
  * wrapping inline selected.
  * more documents.
  * more contributor.
  * more time to improve emmet.vim.

==============================================================================
vim:tw=78:ts=8:ft=help:norl:noet:fen:fdl=0: