BVB Source Codes

emmet-vim Show emmet.txt Source code

Return Download emmet-vim: download emmet.txt Source code - Download emmet-vim Source code - Type:.txt
  1. *emmet.txt*        *Emmet* for Vim
  2.  
  3.            -------------------------------------------------------
  4.              Emmet: vim plugins for HTML and CSS hi-speed coding
  5.            -------------------------------------------------------
  6.  
  7. Author: Yasuhiro Matsumoto <mattn.jp@gmail.com>
  8. WebSite: http://mattn.kaoriya.net/
  9. Repository: https://github.com/mattn/emmet-vim
  10. Site: https://mattn.github.com/emmet-vim
  11. License: BSD style license
  12.  
  13. ==============================================================================
  14. CONTENTS                                                      *emmet-contents*
  15.  
  16. Introduction           |emmet-introduction|
  17. Install                |emmet-install|
  18. Tutorial               |emmet-tutorial|
  19.   1. Expand abbreviation            |emmet-expand-abbr|              |<C-y>,|
  20.   2. Expand word                    |emmet-expand-word|              |<C-y>;|
  21.   3. Update tag                     |emmet-update-tag|               |<C-y>u|
  22.   4. Wrap with abbreviation         |emmet-wrap-with-abbreviation|   |v_<C-y>,|
  23.   5. Balance tag inward             |emmet-balance-tag-inward|       |<C-y>d|
  24.   6. Balance tag outward            |emmet-balance-tag-outward|      |<C-y>D|
  25.   7. Go to next edit point          |emmet-goto-next-point|          |<C-y>n|
  26.   8. Go to previous edit point      |emmet-goto-previous-point|      |<C-y>N|
  27.   9. Add and update <img> size      |emmet-update-image-size|        |<C-y>i|
  28.  10. Merge lines                    |emmet-merge-lines|              |<C-y>m|
  29.  11. Remove tag                     |emmet-remove-tag|               |<C-y>k|
  30.  12. Split/join tag                 |emmet-split-join-tag|           |<C-y>j|
  31.  13. Toggle comment                 |emmet-toggle-comment|           |<C-y>/|
  32.  14. Make anchor from URL           |emmet-make-anchor-url|          |<C-y>a|
  33.  15. Make quoted text from URL      |emmet-quoted-text-url|          |<C-y>A|
  34.  16. Code pretty                    |emmet-code-pretty|              |<C-y>c|
  35.  17. Lorem ipsum                    |emmet-lorem-ipsum|
  36. HTML expression syntax |emmet-html-expression-syntax|
  37.   1. Elements                       |emmet-html-syntax-elements|
  38.   2. Nesting operators              |emmet-html-syntax-nesting-operators|
  39.   2.1. Child                        |emmet->|
  40.   2.2. Sibling                      |emmet-+|
  41.   2.3. Climb-up                     |emmet-^|
  42.   2.4. Multiplication               |emmet-star|
  43.   2.5. Grouping                     |emmet-()|
  44.   3. Attribute operators            |emmet-html-syntax-attribute-operators|
  45.   3.1. ID and CLASS                 |emmet-.| |emmet-#|
  46.   3.2. Custom attributes            |emmet-[]|
  47.   3.3. Item numbering               |emmet-$|
  48.   3.3.1. Changing numbering origin and direction |emmet-@|
  49.   3.4. Quote character              |emmet-html-attr-quote-char|
  50.   4. Text                           |emmet-{}|
  51.   5. Implicit tag names             |emmet-html-implicit-tag-names|
  52.   6. Notes on abbreviation formatting |emmet-html-syntax-notes|
  53.   7. Choose position to insert text when wrap abbreviation |emmet-$#|
  54. CSS expression syntax  |emmet-css-expression-syntax|
  55.   1. Properties                     |emmet-css-properties|
  56.   2. Values                         |emmet-css-values|
  57.   3. Units                          |emmet-css-units|
  58.   4. Vendor prefixes                |emmet-css-vendor-prefixes|
  59. Commands               |emmet-commands|
  60.   :Emmet                            |:Emmet|
  61.   :EmmetInstall                     |:EmmetInstall|
  62. Variables              |emmet-variables|
  63.   g:emmet_html5                     |g:emmet_html5|
  64.   g:emmet_docroot                   |g:emmet_docroot|
  65.   g:emmet_curl_command              |g:emmet_curl_command|
  66.   g:user_emmet_complete_tag         |g:user_emmet_complete_tag|
  67.   g:user_emmet_leader_key           |g:user_emmet_leader_key|
  68.   g:user_emmet_install_global       |g:user_emmet_install_global|
  69.   g:user_emmet_install_command      |g:user_emmet_install_command|
  70.   g:user_emmet_settings             |g:user_emmet_settings|
  71.   g:user_emmet_mode                 |g:user_emmet_mode|
  72. Customize              |emmet-customize|
  73.   1. Key mappings                   |emmet-customize-key-mappings|
  74.   2. Indent size                    |emmet-indent-size|
  75.   3. Define tag's behavior          |emmet-define-tags-behavior|
  76.   4. Adding custom snippets         |emmet-custom-snippets|
  77. Filters                |emmet-filters-list|
  78.   Escapes XML-unsafe characters     |emmet-filter-e|
  79.   Add comments around 'important tags' |emmet-filter-c|
  80.   Outputs as a single line          |emmet-filter-s|
  81.   Trim list markers                 |emmet-filter-t|
  82. Links                  |emmet-links|
  83. ToDo                   |emmet-todo|
  84.  
  85. ==============================================================================
  86. INTRODUCTION                                      *emmet-introduction* *emmet*
  87.  
  88. Emmet is an editor plugin for high-speed HTML, XML, XSL (or any other
  89. structured code format) coding and editing. The core of this plugin is a
  90. powerful abbreviation engine which allows you to expand expressions,
  91. similar to CSS selectors, into HTML code:
  92. >
  93.     div#page>div.logo+ul#navigation>li*5>a
  94. <
  95. can be expanded into:
  96. >
  97.     <div id="page">
  98.         <div class="logo"></div>
  99.         <ul id="navigation">
  100.             <li><a href=""></a></li>
  101.             <li><a href=""></a></li>
  102.             <li><a href=""></a></li>
  103.             <li><a href=""></a></li>
  104.             <li><a href=""></a></li>
  105.         </ul>
  106.     </div>
  107. <
  108. Read more about current Emmet syntax
  109.   |emmet-html-expression-syntax|
  110.   |emmet-css-expression-syntax|
  111.   http://docs.emmet.io/abbreviations/
  112.  
  113. Abbreviation engine has a modular structure which allows you
  114. to expand abbreviations into different languages.
  115. Emmet currently supports CSS, HTML, XML/XSL and HAML, Slim languages
  116. via filters (see |emmet-filter|).
  117.  
  118. ==============================================================================
  119. INSTALL                                                        *emmet-install*
  120.  
  121. Install the distributed files into Vim runtime directory which is usually
  122. '~/.vim/', or '$HOME/vimfiles' on Windows.
  123.  
  124. If you install pathogen (https://github.com/tpope/vim-pathogen)
  125. that provided by Tim Pope, you should extract the
  126. file into 'bundle' directory.
  127.  
  128. ==============================================================================
  129. TUTORIAL                                                      *emmet-tutorial*
  130.  
  131. If you are seeing this file as :help, then you can't edit this file.
  132. You should copy this section and create new buffer, paste and write as
  133. 'emmet-tutor.txt'. Formally, open the file to start tutorial.
  134.  
  135. 1. Expand abbreviation                            *emmet-expand-abbr* *<C-y>,*
  136.  
  137.   Type abbreviation as 'div>p#foo$*3>a' and type '<C-y>,'.
  138. >
  139.   <div>
  140.       <p id="foo1">
  141.           <a href=""></a>
  142.       </p>
  143.       <p id="foo2">
  144.           <a href=""></a>
  145.       </p>
  146.       <p id="foo3">
  147.           <a href=""></a>
  148.       </p>
  149.   </div>
  150. <
  151. 2. Expand abbreviation                            *emmet-expand-word* *<C-y>;*
  152.  
  153.   When you want to expand word except html tokens like below, use this.
  154. >
  155.   <html
  156.   >foo
  157. <
  158.   This will be expanded like:
  159. >
  160.   <html
  161.   ><foo></foo>
  162.  
  163. 3. Update tag                                     *emmet-update-tag* *<C-y>u*
  164.  
  165.   The begining of tags '<div>' on below
  166. >
  167.   <div>foo</div>
  168. <
  169.   Type '<C-y>u' request 'Enter Abbreviation:'. Then type
  170. >
  171.   .global
  172. <
  173.   This will be expanded like:
  174. >
  175.   <div class="global">foo</div>
  176. <
  177. 4. Wrap with abbreviation            *emmet-wrap-with-abbreviation* *v_<C-y>,*
  178.  
  179.   Write as below.
  180. >
  181.   test1
  182.   test2
  183.   test3
  184. <
  185.   Then do visual select (line wise) and type '<C-y>,'.
  186.   If you request 'Tag:', then type
  187. >
  188.   ul>li*
  189. <
  190.   Result:
  191. >
  192.   <ul>
  193.       <li>test1</li>
  194.       <li>test2</li>
  195.       <li>test3</li>
  196.   </ul>
  197. <
  198.   If you type tag name, for example
  199. >
  200.   blockquote
  201. <
  202.   then you'll see as following:
  203. >
  204.   <blockquote>
  205.       test1
  206.       test2
  207.       test3
  208.   </blockquote>
  209. <
  210.   See also: |emmet-filter-t|, |emmet-$#|
  211.  
  212. 5. Balance tag inward                      *emmet-balance-tag-inward* *<C-y>d*
  213.  
  214.   To select inward of '<ul>' tag, type '<C-y>d' in insert mode.
  215. >
  216.   <ul>
  217.   *   <li class="list1"></li>
  218.       <li class="list2"></li>
  219.       <li class="list3"></li>
  220.   </ul>
  221. <
  222.   If cursor is at '*', '<C-y>d' select from begin of '<ul>' to end of '</ul>'.
  223.   If cursor is at first of '<li>', it select '<li class="list1"></li>'.
  224.  
  225. 6. Balance tag outward                    *emmet-balance-tag-outward* *<C-y>D*
  226.  
  227.   To select outward of '<ul>' tag type '<C-y>D' in insert mode.
  228. >
  229.   <ul>
  230.     * <li class="list1"></li>
  231.       <li class="list2"></li>
  232.       <li class="list3"></li>
  233.   </ul>
  234. <
  235.   If cursor is at '*', '<C-y>D' select from next letter of '<ul>'
  236.   to previous letter of '</ul>'.
  237.   If cursor is at first of '<li>', it select '<li class="list1"></li>'.
  238.  
  239. 7. Go to next edit point                      *emmet-goto-next-point* *<C-y>n*
  240.  
  241.   To jump next point that need to edit, type '<C-y>n' in insert mode.
  242. >
  243.   * <div id="foo" class="">foo</div>
  244.     <div id="bar" class="bar"></div>
  245. <
  246.   If cursor is at '*', type '<C-y>n' to move a cursor
  247.   into attribute value of '<div>' specified id as 'foo'.
  248.   And type again '<C-y>n' to move a cursor
  249.   into inner of '<div>' specified id as 'bar'.
  250.  
  251. 8. Go to previous edit point              *emmet-goto-previous-point* *<C-y>N*
  252.  
  253.   To jump previous point that need to edit, type '<C-y>N' in insert mode.
  254. >
  255.   <div id="foo" class="">foo</div>
  256.   <div id="bar" class="bar"></div> *
  257. <
  258.   If cursor is at '*', type '<C-y>N' to move a cursor
  259.   into '<div>' specified id as 'bar'.
  260.   And type again '<C-y>N' to move a cursor
  261.   into attribute value of 'foo'.
  262.  
  263. 9. Add and update <img> size                *emmet-update-image-size* *<C-y>i*
  264.  
  265.   To add or update 'width' and 'height' attributes of image,
  266.   type '<C-y>i' on '<img>' tag
  267. >
  268.   <img src="foo.png" />
  269. <
  270.   Type '<C-y>i' on '<img>' tag
  271. >
  272.   <img src="foo.png" width="32" height="32" />
  273. <
  274.   If you change image, then type it again. it will be following.
  275. >
  276.   <img src="foo-48.png" width="32" height="48" />
  277. <
  278.   Image size retrieved using 'identify' (ImageMagick.org) (if available)
  279.   or |xxd|.
  280.  
  281. 10. Merge lines                                    *emmet-merge-lines* *<C-y>m*
  282.  
  283.   To join multi line text like following, type |J|.
  284. >
  285.   <ul>
  286.       <li class="list1"></li>
  287.       <li class="list2"></li>
  288.       <li class="list3"></li>
  289.   </ul>
  290. <
  291.   If you select part of line include '<li>' and type |<C-y>m|,
  292.   it will be following.
  293. >
  294.   <ul>
  295.       <li class="list1"></li><li class="list2"></li><li class="list3"></li>
  296.   </ul>
  297. <
  298. 11. Remove tag                                      *emmet-remove-tag* *<C-y>k*
  299.  
  300.   To remove tag in the block, type '<C-y>k'.
  301. >
  302.   <div class="foo">
  303.       <a>cursor is here</a>
  304.   </div>
  305. <
  306.   Type '<C-y>k' in insert mode, then
  307. >
  308.   <div class="foo">
  309.  
  310.   </div>
  311. <
  312.   And type '<C-y>k' in there again, then '<div>' will be removed.
  313.  
  314. 12. Split/join tag                             *emmet-split-join-tag* *<C-y>j*
  315.  
  316.   To join block, type '<C-y>j'.
  317. >
  318.   <div class="foo">
  319.       cursor is here
  320.   </div>
  321. <
  322.   Type '<C-y>j' in insert mode. Then,
  323. >
  324.   <div class="foo" />
  325. <
  326.   And type '<C-y>j' in there again.
  327. >
  328.   <div class="foo">
  329.   </div>
  330. <
  331. 13. Toggle comment                             *emmet-toggle-comment* *<C-y>/*
  332.  
  333.   Move cursor to block
  334. >
  335.   <div>
  336.       hello world
  337.   </div>
  338. <
  339.   Type '<C-y>/' in insert mode.
  340. >
  341.   <!-- <div>
  342.       hello world
  343.   </div> -->
  344. <
  345.   Type '<C-y>/' in there again.
  346. >
  347.   <div>
  348.       hello world
  349.   </div>
  350. <
  351. 14. Make anchor from URL                      *emmet-make-anchor-url* *<C-y>a*
  352.  
  353.   Move cursor to URL
  354. >
  355.   http://www.google.com/
  356. <
  357.   Type '<C-y>a'
  358. >
  359.   <a href="http://www.google.com/">Google</a>
  360. <
  361.   Text retrieved using command, specified by |g:emmet_curl_command|.
  362.  
  363. 15. Make quoted text from URL                 *emmet-quoted-text-url* *<C-y>A*
  364.  
  365.   Move cursor to URL
  366. >
  367.   https://github.com/
  368. <
  369.   Type '<C-y>A'
  370. >
  371.   <blockquote class="quote">
  372.       <a href="https://github.com/">Secure source code hosting and collaborative development - GitHub</a><br />
  373.       <p>How does it work? Get up and running in seconds by forking a project, pushing an existing repository...</p>
  374.       <cite>https://github.com/</cite>
  375.   </blockquote>
  376. <
  377.   Text retrieved using command, specified by |g:emmet_curl_command|.
  378.  
  379. 16. Code pretty                                   *emmet-code-pretty* *<C-y>c*
  380.  
  381.   Select code block, for example select following code from 'int main()'.
  382. >
  383.   <p>Writing in C language</p>
  384.  
  385.   int main() {
  386.     puts("hello world");
  387.   }
  388. <
  389.   Type '<C-y>c'
  390. >
  391.   <span class="Type">int</span>&nbsp;main() {<br />
  392.   &nbsp;&nbsp;puts(<span class="Constant">&quot;hello world&quot;</span>);<br />
  393.   }<br />
  394. <
  395.   To convert text into html used command |:TOhtml|.
  396.  
  397. 17. Lorem ipsum                                            *emmet-lorem-ipsum*
  398.  
  399.   To insert dummy text (30 words by default).
  400. >
  401.   div>lorem
  402. <
  403.   Type |<C-y>,|
  404. >
  405.   <div>Adipisicing asperiores deleniti ipsum fuga deserunt perferendis
  406.   molestiae sunt excepturi aut quo nihil! Optio accusantium corporis molestiae
  407.   deserunt ab, veritatis commodi. Eius nobis ab deserunt magni iure quo
  408.   laboriosam laboriosam.</div>
  409. <
  410.   For japanese user, put like follow into your |g:user_emmet_settings|:
  411. >
  412.   let g:user_emmet_settings = {
  413.     ...
  414.  
  415.     \  'custom_expands1' : {
  416.     \    '^\%(lorem\|lipsum\)\(\d*\)$' : function('emmet#lorem#ja#expand'),
  417.     \  },
  418.  
  419.     ...
  420. <
  421.   You will get japanese dummy text. Text retrieved from url
  422.   'http://www.aozora.gr.jp/cards/000081/files/470_15407.html'
  423.   using command, specified by |g:emmet_curl_command|.
  424.  
  425.   To insert 3 words of dummy text.
  426. >
  427.   div>lorem3
  428. <
  429.   Type |<C-y>,|
  430. >
  431.   <div>
  432.       Elit libero id.
  433.   </div>
  434. <
  435. ==============================================================================
  436. HTML EXPRESSION SYNTAX                          *emmet-html-expression-syntax*
  437.  
  438. Emmet uses syntax similar to CSS selectors for describing elements' positions
  439. inside generated tree and elements' attributes.
  440.  
  441. 1. Elements                                       *emmet-html-syntax-elements*
  442.  
  443.   You can use elements' names like 'div' or 'p' to generate HTML tags.
  444. >
  445.     p     ->   <p></p>
  446.     div   ->   <div></div>
  447. <
  448.   You can write any word and transform it into a tag:
  449. >
  450.     foo   ->   <foo></foo>
  451.     bar   ->   <bar></bar>
  452. <
  453.   Emmet knowns set of empty elements:
  454. >
  455.     br    ->   <br />   or <br>
  456.     meta  ->   <meta /> or <meta>
  457. <
  458.   To choose between HTML '>' and XHTML ' />' use |g:emmet_html5| or
  459.   |g:user_emmet_settings|:
  460. >
  461.   let g:user_emmet_settings = {
  462.   \    ...
  463.   \    'html': {
  464.   \        ...
  465.   \        'empty_element_suffix': ' />',
  466.   \        ...
  467.   \    },
  468.   \    ...
  469.   \}
  470. <
  471.   Emmet will automatically insert some attributes:
  472. >
  473.     a     ->   <a href="" ></a>
  474.     link  ->   <link rel="stylesheet" href="" />
  475. <
  476.   Set of inserted attributes can be changed using |g:user_emmet_settings|:
  477. >
  478.   let s:emmet_settings = {
  479.   \    ...
  480.   \    'html': {
  481.   \        ...
  482.   \        'default_attributes': {
  483.   \            ...
  484.   \            'a': {'href': ''},
  485.   \            'ins': {'datetime': '${datetime}'},
  486.   \            'iframe': [{'src': ''}, {'frameborder': '0'}],
  487.   \            'textarea': [{'name': ''}, {'id': ''}, {'cols': '30'}, {'rows': '10'}],
  488.   \            ...
  489.   \        },
  490.   \        ...
  491.   \    },
  492.   \    ...
  493.   \}
  494. <
  495. 2. Nesting operators                     *emmet-html-syntax-nesting-operators*
  496.  
  497.   Nesting operators are used to position abbreviation elements
  498.   inside generated tree: whether it should be placed
  499.   inside or near the context element.
  500.  
  501.   Operator   Description      Link ~
  502.   >          Child            |emmet->|
  503.   +          Sibling          |emmet-+|
  504.   ^          Climb-up         |emmet-^|
  505.   *          Multiplication   |emmet-star|
  506.   ()         Grouping         |emmet-()|
  507.  
  508. 2.1. Child                                                           *emmet->*
  509.  
  510.   You can use '>' operator to nest elements inside each other:
  511. >
  512.   div>ul>li
  513. <
  514.   will produce
  515. >
  516.   <div>
  517.       <ul>
  518.           <li></li>
  519.       </ul>
  520.   </div>
  521. <
  522. 2.2. Sibling                                                         *emmet-+*
  523.  
  524.   Use '+' operator to place elements near each other, on the same level:
  525. >
  526.   div+p+bq
  527. <
  528.   will output
  529. >
  530.   <div></div>
  531.   <p></p>
  532.   <blockquote></blockquote>
  533. <
  534. 2.3. Climb-up                                                        *emmet-^*
  535.  
  536.   With '>' operator you're descending down the generated tree and
  537.   positions of all sibling elements will be resolved
  538.   against the most deepest element:
  539. >
  540.   div+div>p>span+em
  541. <
  542.   will be expanded to
  543. >
  544.   <div></div>
  545.   <div>
  546.       <p>
  547.           <span></span>
  548.           <em></em>
  549.       </p>
  550.   </div>
  551. <
  552.   With '^' operator, you can climb one level up the tree and change context
  553.   where following elements should appear:
  554. >
  555.   div+div>p>span+em^bq
  556. <
  557.   outputs to
  558. >
  559.   <div></div>
  560.   <div>
  561.       <p>
  562.           <span></span>
  563.           <em></em>
  564.       </p>
  565.       <blockquote></blockquote>
  566.   </div>
  567. <
  568.   You can use as many '^' operators as you like,
  569.   each operator will move one level up:
  570. >
  571.   div+div>p>span+em^^^bq
  572. <
  573.   will output to
  574. >
  575.   <div></div>
  576.   <div>
  577.       <p>
  578.           <span></span>
  579.           <em></em>
  580.       </p>
  581.   </div>
  582.   <blockquote></blockquote>
  583. <
  584. 2.4. Multiplication                                               *emmet-star*
  585.  
  586.   With '*' operator you can define how many times element should be outputted:
  587. >
  588.   ul>li*5
  589. <
  590.   outputs to
  591. >
  592.   <ul>
  593.       <li></li>
  594.       <li></li>
  595.       <li></li>
  596.       <li></li>
  597.       <li></li>
  598.   </ul>
  599. <
  600.   Expression may contain several '*' operators:
  601. >
  602.   tr*2>td*3
  603. <
  604.   become
  605. >
  606.   <tr>
  607.       <td></td>
  608.       <td></td>
  609.       <td></td>
  610.   </tr>
  611.   <tr>
  612.       <td></td>
  613.       <td></td>
  614.       <td></td>
  615.   </tr>
  616. <
  617. 2.5. Grouping                                                       *emmet-()*
  618.  
  619.   Parentheses '()' are used by Emmets' power users for grouping subtrees
  620.   in complex abbreviations:
  621. >
  622.   div>(header>ul>li*2>a)+footer>p
  623. <
  624.   expands to
  625. >
  626.   <div>
  627.       <header>
  628.           <ul>
  629.               <li><a href=""></a></li>
  630.               <li><a href=""></a></li>
  631.           </ul>
  632.       </header>
  633.       <footer>
  634.           <p></p>
  635.       </footer>
  636.   </div>
  637. <
  638.   If you're working with browser's DOM, you may think of groups
  639.   as Document Fragments: each group contains abbreviation subtree and
  640.   all the following elements are inserted at the same level
  641.   as the first element of group.
  642.  
  643.   You can nest groups inside each other and
  644.   combine them with multiplication '*' operator:
  645. >
  646.   (div>dl>(dt+dd)*3)+footer>p
  647. <
  648.   produces
  649. >
  650.   <div>
  651.       <dl>
  652.           <dt></dt>
  653.           <dd></dd>
  654.           <dt></dt>
  655.           <dd></dd>
  656.           <dt></dt>
  657.           <dd></dd>
  658.       </dl>
  659.   </div>
  660.   <footer>
  661.       <p></p>
  662.   </footer>
  663. <
  664.   With groups, you can literally write full page mark-up
  665.   with a single abbreviation, but please don't do that.
  666.  
  667. 3. Attribute operators                 *emmet-html-syntax-attribute-operators*
  668.  
  669.   Attribute operators are used to modify attributes of outputted elements.
  670.   For example, in HTML and XML you can quickly add 'class' attribute
  671.   to generated element.
  672.  
  673.   Operator   Description                 Link ~
  674.   .          Attribute 'class'             |emmet-.|
  675.   #          Attribute 'id'                |emmet-#|
  676.   []         Custom attributes             |emmet-[]|
  677.   $          Number                        |emmet-$|
  678.   @          Number origin and direction   |emmet-@|
  679.  
  680. 3.1. ID and CLASS                                          *emmet-.* *emmet-#*
  681.  
  682.   In CSS, you use 'elem#id' and 'elem.class' notation to reach the elements
  683.   with specified 'id' or 'class' attributes.
  684.   In Emmet, you can use the very same syntax to add these attributes
  685.   to specified element:
  686. >
  687.   span.class1          ->   <span class="class1"></span>
  688.   span.class1.class2   ->   <span class="class1 class2"></span>
  689.   div#wrapper          ->   <div id="wrapper"></div>
  690.   div#wrapper.content  ->   <div id="wrapper" class="content"></div>
  691. <
  692.   More complex expression:
  693. >
  694.   div#header+div.page+div#footer.class1.class2.class3
  695. <
  696.   will output
  697. >
  698.   <div id="header"></div>
  699.   <div class="page"></div>
  700.   <div id="footer" class="class1 class2 class3"></div>
  701. <
  702. 3.2. Custom attributes                                              *emmet-[]*
  703.  
  704.   You can use '[attr]' notation (as in CSS)
  705.   to add custom attributes to your element:
  706. >
  707.   td[title="Hello world!" colspan=3]
  708. <
  709.   outputs
  710. >
  711.   <td title="Hello world!" colspan="3"></td>
  712. <
  713.   You can place as many attributes as you like inside square brackets.
  714.  
  715.   Attribute values may be omitted:
  716. >
  717.   td[colspan title]
  718. <
  719.   will produce
  720. >
  721.   <td colspan="" title="">
  722. <
  723.   You can use single or double quotes for quoting attribute values.
  724. >
  725.   div[a='value1' b="value2"]
  726. <
  727.   become
  728. >
  729.   <div a="value1" b="value2"></div>
  730. <
  731.   You don't need to quote values if they don't contain spaces:
  732. >
  733.   td[title=hello colspan=3]
  734. <
  735.   will output
  736. >
  737.   <td title="hello" colspan="3"></td>
  738. <
  739. 3.3. Item numbering                                                  *emmet-$*
  740.  
  741.   With multiplication '*' operator you can repeat elements,
  742.   but with '$' you can number them.
  743.   Place '$' operator inside element's name, attribute's name or
  744.   attribute's value to output current number of repeated element:
  745. >
  746.   ul>li.item_$*5
  747. <
  748.   outputs to
  749. >
  750.   <ul>
  751.       <li class="item_1"></li>
  752.       <li class="item_2"></li>
  753.       <li class="item_3"></li>
  754.       <li class="item_4"></li>
  755.       <li class="item_5"></li>
  756.   </ul>
  757. <
  758.   You can use multiple '$' in a row to pad number with zeroes:
  759. >
  760.   ul>li.item_$$$*5
  761. <
  762.   outputs to
  763. >
  764.   <ul>
  765.       <li class="item_001"></li>
  766.       <li class="item_002"></li>
  767.       <li class="item_003"></li>
  768.       <li class="item_004"></li>
  769.       <li class="item_005"></li>
  770.   </ul>
  771. <
  772.   Also '$' can be used in element name and in text (|emmet-{}|):
  773. >
  774.   h$[title=item$]{Header $}*3
  775. <
  776.   transformed to
  777. >
  778.   <h1 title="item1">Header 1</h1>
  779.   <h2 title="item2">Header 2</h2>
  780.   <h3 title="item3">Header 3</h3>
  781. <
  782. 3.3.1. Changing numbering origin and direction                         *emmet-@*
  783.  
  784.   With '@' modifier, you can change
  785.   - numbering direction (ascending or descending) and
  786.   - origin (i. e. start value).
  787.  
  788.   For example, to change direction, add '@-' after '$':
  789. >
  790.   ul>li.item_$@-*5
  791. <
  792.   outputs to
  793. >
  794.   <ul>
  795.       <li class="item_5"></li>
  796.       <li class="item_4"></li>
  797.       <li class="item_3"></li>
  798.       <li class="item_2"></li>
  799.       <li class="item_1"></li>
  800.   </ul>
  801. <
  802.   To change counter origin value, add '@N' modifier to '$':
  803. >
  804.   ul>li.item_$@3*5
  805. <
  806.   transforms to
  807. >
  808.   <ul>
  809.       <li class="item_3"></li>
  810.       <li class="item_4"></li>
  811.       <li class="item_5"></li>
  812.       <li class="item_6"></li>
  813.       <li class="item_7"></li>
  814.   </ul>
  815. <
  816.   You can use these modifiers together:
  817. >
  818.   ul>li.item_$@-3*5
  819. <
  820.   is transformed to
  821. >
  822.   <ul>
  823.       <li class="item_7"></li>
  824.       <li class="item_6"></li>
  825.       <li class="item_5"></li>
  826.       <li class="item_4"></li>
  827.       <li class="item_3"></li>
  828.   </ul>
  829. >
  830. 3.4. Quote character                              *emmet-html-attr-quote-char*
  831.  
  832.   |g:user_emmet_settings| may be used to change attribute quote character:
  833. >
  834.   let g:user_emmet_settings = {
  835.        ...
  836.   \    'html' : {
  837.            ...
  838.   \        'quote_char': "'",
  839.            ...
  840.   \    },
  841.        ...
  842.   \}
  843. <
  844.   Then abbreviation
  845. >
  846.   a[target=_blank]
  847. <
  848.   will expand to
  849. >
  850.   <a href='' target='_blank'></a>
  851. <
  852.   instead of
  853. >
  854.   <a href="" target="_blank"></a>
  855. <
  856.   Default quote is '"'.
  857.  
  858. 4. Text                                                             *emmet-{}*
  859.  
  860.   You can use curly braces to add text to element:
  861. >
  862.   a{Click me}
  863. <
  864.   will produce
  865. >
  866.   <a href="">Click me</a>
  867. <
  868.   Note that '{text}' is used and parsed as a separate element
  869.   (like, 'div', 'p' etc), but has a special meaning
  870.   when written right after element. For example,
  871. >
  872.   a{click}
  873. <
  874.   and
  875. >
  876.   a>{click}
  877. <
  878.   will produce the same output, but
  879. >
  880.   a{click}+b{here}
  881. <
  882.   and
  883. >
  884.   a>{click}+b{here}
  885. <
  886.   won't:
  887. >
  888.   <!-- a{click}+b{here} -->
  889.   <a href="">click</a><b>here</b>
  890.  
  891.   <!-- a>{click}+b{here} -->
  892.   <a href="">click<b>here</b></a>
  893. <
  894.   In second example the '<b>' element is placed inside '<a>' element.
  895.   And that's the difference: when '{text}' is written right after element,
  896.   it doesn't change parent context.
  897.   Here's more complex example showing why it is important:
  898. >
  899.   p>{Click }+a{here}+{ to continue}
  900. <
  901.   produces
  902. >
  903.   <p>Click <a href="">here</a> to continue</p>
  904. <
  905.   In this example, to write 'Click here to continue' inside '<p>' element
  906.   we have explicitly move down the tree with '>' operator after 'p',
  907.   but in case of 'a' element we don't have to, since we need '<a>' element
  908.   with here word only, without changing parent context.
  909.  
  910.   For comparison, here's the same abbreviation
  911.   written without child '>' operator:
  912. >
  913.   p{Click }+a{here}+{ to continue}
  914. <
  915.   produces
  916. >
  917.   <p>Click </p>
  918.   <a href="">here</a> to continue
  919. <
  920. 5. Implicit tag names                          *emmet-html-implicit-tag-names*
  921.  
  922.   Even with such a powerful abbreviation engine,
  923.   which can expand large HTML structures from short abbreviation,
  924.   writing tag names may be very tedious.
  925.  
  926.   In many cases you can skip typing tag names and
  927.   Emmet will substitute it for you.
  928.   For example, instead of >
  929.     div.content
  930. <  you can simply write >
  931.     .content
  932. <  and expand it into >
  933.     <div class="content"></div>
  934. <
  935.   Other examples:
  936. >
  937.   .wrapper   ->   <div class="wrapper"></div>
  938.   #popup     ->   <div id="popup"></div>
  939. <
  940.   When you expand abbreviation, Emmet tries to grab parent context,
  941.   e. g. the HTML element, inside which you're expanding the abbreviation.
  942.   If the context was grabbed successfully,
  943.   Emmet uses its name to resolve implicit names.
  944.   Emmet looks at the parent tag name every time
  945.   you're expanding the abbreviation with an implicit name.
  946.   Here's how it resolves the names for some parent elements:
  947.  
  948.   Inserted element   Parent elements ~
  949.   li                 ul, ol
  950.   tr                 table, tbody, thead, tfoot
  951.   td                 tr
  952.   option             select, optgroup
  953.   span               Inline elements
  954.   div                Block elements
  955.  
  956.   Take a look at some abbreviations equivalents
  957.   with implicit and explicit tag names:
  958. >
  959.   .wrap>.content              ->   div.wrap>div.content
  960.   em>.info                    ->   em>span.info
  961.   ul>.item*3                  ->   ul>li.item*3
  962.   table>.row>.col             ->   table>tr.row>td.col
  963.   table>#row$*4>[colspan=2]   ->   table>tr#row$*4>td[colspan=2]
  964. <
  965. 6. Notes on abbreviation formatting                  *emmet-html-syntax-notes*
  966.  
  967.   When you get familiar with Emmet's abbreviations syntax,
  968.   you may want to use some formatting to make your abbreviations more readable.
  969.   For example, use spaces between elements and operators, like this:
  970. >
  971.   (header > ul.nav > li*5) + footer
  972. <
  973.   But it won't work, because space is a stop symbol
  974.   where Emmet stops abbreviation parsing.
  975.  
  976.   Many users mistakenly think that each abbreviation
  977.   should be written in a new line, but they are wrong:
  978.   you can type and expand abbreviation anywhere in the text:
  979.  
  980.   This is why Emmet needs some indicators (like spaces)
  981.   where it should stop parsing to not expand anything that you don't need.
  982.   If you're still thinking that such formatting is required
  983.   for complex abbreviations to make them more readable:
  984.   -  abbreviations are not a template language,
  985.      they don't have to be "readable",
  986.      they have to be "quickly expandable and removable";
  987.   -  you don't really need to write complex abbreviations.
  988.      Stop thinking that "typing" is the slowest process in web-development.
  989.      You'll quickly find out that constructing a single complex abbreviation
  990.      is much slower and error-prone than constructing and typing
  991.      a few short ones.
  992.  
  993. 7. Choose position to insert text when wrap abbreviation            *emmet-$#*
  994.  
  995.   When wrap abbreviation (|emmet-wrap-with-abbreviation|) you can choose
  996.   position to insert text using '$#' operator.
  997.   Operator '$#' may be used only inside |emmet-[]| and/or |emmet-{}|.
  998.  
  999.   For example, do visual select (line wise) following text:
  1000. >
  1001.   First
  1002.   Second
  1003.   Third
  1004. <
  1005.   Then press '<C-y>,' and type
  1006. >
  1007.   ul>li[ title="[$#]" ]*
  1008. <
  1009.   Result:
  1010. >
  1011.   <ul>
  1012.       <li title="[First]">First</li>
  1013.       <li title="[Second]">Second</li>
  1014.       <li title="[Third]">Third</li>
  1015.   </ul>
  1016. <
  1017.   You may type
  1018. >
  1019.   input[ type=input value=$# ]
  1020. <
  1021.   to get
  1022. >
  1023.   <input type="input" value="First">
  1024.   <input type="input" value="Second">
  1025.   <input type="input" value="Third">
  1026. <
  1027.   Using '$#' you can type text (|emmet-{}|) only once:
  1028. >
  1029.   a[title=$#]{foo}
  1030. <
  1031.   will be expanded to
  1032. >
  1033.   <a href="" title="foo">foo</a>
  1034. <
  1035. ==============================================================================
  1036. CSS EXPRESSION SYNTAX                            *emmet-css-expression-syntax*
  1037.  
  1038. 1. Properties                         *emmet-css-properties*
  1039.  
  1040.   Emmet has a lot of predefined snippets for CSS properties.
  1041. >
  1042.   <style type="text/css">
  1043.   .page {
  1044.       m|
  1045.   }
  1046.   </style>
  1047. <
  1048.   become
  1049. >
  1050.   <style type="text/css">
  1051.   .page {
  1052.       margin: |;
  1053.   }
  1054.   </style>
  1055. <
  1056.   In above example '|' denotes a cursor (caret) position.
  1057.  
  1058.   Other examples:
  1059. >
  1060.   t      ->   top: ;
  1061.   d      ->   display: ;
  1062.   o      ->   outline: ;
  1063.   ov     ->   overflow: ;
  1064.   cu     ->   cursor: ;
  1065.   bdrs   ->   border-radius: ;
  1066. <
  1067.   '+' operator may be used to insert number of properties:
  1068. >
  1069.   m1+p2
  1070. <
  1071.   become
  1072. >
  1073.   margin: 1px;
  1074.   padding: 2px;
  1075. <
  1076. 2. Values                                                   *emmet-css-values*
  1077.  
  1078.   Some properties have default values:
  1079. >
  1080.   c     ->   color: #000;
  1081.   bgc   ->   background-color: #FFF;
  1082.   zoo   ->   zoom: 1;
  1083. <
  1084.   To insert predefined property value after abbreviation
  1085.   type colon ':' and first character of predefined keyword:
  1086. >
  1087.   d:n      ->   display: none;
  1088.   d:b      ->   display: block;
  1089.   d:i      ->   display: inline;
  1090. <
  1091.   Numerical value can be typed directly after abbreviation:
  1092. >
  1093.   m10   ->   margin: 10px;
  1094.   m2e   ->   margin: 2em;
  1095. <
  1096.   Use a hyphen '-' to separate some numerical values:
  1097. >
  1098.   m10-20       ->   margin: 10px 20px;
  1099.   p1-2-3       ->   padding: 1px 2px 3px;
  1100. <
  1101.   To negative values
  1102.   precede the first value with hyphen and all the rest with double hyphens:
  1103. >
  1104.   m-10         ->   margin: -10px;
  1105.   m-1--2       ->   margin: -1px -2px;
  1106.   p-2--1-0-1   ->   padding: -2px -1px 0 1px;
  1107. <
  1108.   To insert '!important' append '!' to property abbreviation:
  1109. >
  1110.   m!     ->   margin:  !important;
  1111.   bac!   ->   background:  !important;
  1112. <
  1113.   You can use special abbreviation 'lg(...)'
  1114.   to insert definition of linear gradient. Example:
  1115. >
  1116.   lg(left, #fc0 30%, red)
  1117. <
  1118.   will expand to
  1119. >
  1120.   background-image: -webkit-gradient(left, 0 0, 0 100, from(#fc0 30%), to(red));
  1121.   background-image: -webkit-linear-gradient(#fc0 30%, red);
  1122.   background-image: -moz-linear-gradient(#fc0 30%, red);
  1123.   background-image: -o-linear-gradient(#fc0 30%, red);
  1124.   background-image: linear-gradient(#fc0 30%, red);
  1125. <
  1126. 3. Units                                                     *emmet-css-units*
  1127.  
  1128.   By default, when you expand an abbreviation with integer value,
  1129.   Emmet outputs it with a 'px' unit:
  1130. >
  1131.   bor2    ->   border: 2px;
  1132.   fs100   ->   font-size: 100px;
  1133.   miw20   ->   min-width: 20px;
  1134. <
  1135.   By default, if you're expanding an abbreviation with a float value,
  1136.   it is outputted with an 'em' unit:
  1137. >
  1138.   fs1.5   ->   font-style: 1.5em;
  1139. <
  1140.   But you can explicitly provide the unit name
  1141.   by putting one of characters right after value:
  1142.  
  1143.   Character   Unit ~
  1144.   p           %
  1145.   e           em
  1146.  
  1147.   Examples:
  1148. >
  1149.   fs2e    ->   font-style: 2em;
  1150.   w100p   ->   width: 100%;
  1151. <
  1152. 4. Vendor prefixes                                 *emmet-css-vendor-prefixes*
  1153.  
  1154.   To automatically create vendor-prefixed copies of property,
  1155.   precede abbreviation with a hyphen '-'. For example, abbreviation
  1156. >
  1157.   -bdrs
  1158. <
  1159.   will be expanded into
  1160. >
  1161.   -webkit-border-radius: ;
  1162.   -moz-border-radius: ;
  1163.   border-radius: ;
  1164. <
  1165. ==============================================================================
  1166. COMMANDS                                                      *emmet-commands*
  1167.  
  1168. :Emmet {expression}                                                   *:Emmet*
  1169.                         Expand {expression} and insert result under cursor.
  1170.                         {expression} is |emmet-html-expression|.
  1171.                         Also see |g:user_emmet_install_command|.
  1172.  
  1173. :EmmetInstall                                                  *:EmmetInstall*
  1174.                         Create Emmet mappings to current buffer
  1175.                         (|mapping|, |:map-<buffer>|) and,
  1176.                         if set |g:user_emmet_complete_tag|,
  1177.                         change |'omnifunc'| option to emmet#completeTag()
  1178.  
  1179. ==============================================================================
  1180. VARIABLES                                                    *emmet-variables*
  1181.  
  1182. g:emmet_html5                                                  *g:emmet_html5*
  1183.                         If set to 1, enable HTML 5 support:
  1184.                         - use ">" instead of "/>": >
  1185.                              <meta />
  1186.                              <meta>
  1187. <                        - omit some HTML 4 attributes: >
  1188.                              <style type="text/css">
  1189.                              <style>
  1190. <                        - add attributes without values; >
  1191.                              <input checked="checked" />
  1192.                              <input checked>
  1193. <                        Default value: 1.
  1194.                         To disable these set variable to 0: >
  1195.                           let g:emmet_html5 = 0
  1196. <
  1197. g:emmet_docroot                                              *g:emmet_docroot*
  1198.                         |Dictionary| used by |<C-y>i|.
  1199.                         Dictionary keys is path relative to http server root.
  1200.                         Dictionary values is local file system absolute path
  1201.                         to http server root directory.
  1202.                         Default value is empty dictionary: {}
  1203.  
  1204. g:emmet_curl_command                                    *g:emmet_curl_command*
  1205.                         Command to download web pages.
  1206.                         Used by |emmet-html-syntax-item-numbering-base|,
  1207.                         |emmet-html-syntax-item-numbering| and
  1208.                         |emmet-lorem-ipsum| (for japanese).
  1209.                         Default value: 'curl -s -L -A Mozilla/5.0'
  1210.  
  1211. g:user_emmet_complete_tag                          *g:user_emmet_complete_tag*
  1212.                         Use omni complete function, provided by Emmet.
  1213.                         When user run |:EmmetInstall|,
  1214.                         following command will be executed: >
  1215.                           setlocal omnifunc=emmet#completeTag
  1216. <
  1217. g:user_emmet_leader_key                              *g:user_emmet_leader_key*
  1218.                         Leading keys to run Emmet functions.
  1219.                         Default value: '<C-y>'.
  1220.                         |:EmmetInstall| will map Emmet keys to current buffer.
  1221.                         See |emmet-customize-key-mappings|.
  1222.  
  1223. g:user_emmet_install_global                      *g:user_emmet_install_global*
  1224.                         If set to 1, Emmet will create global mappings.
  1225.                         Set to 0 to prevent these: >
  1226.                           let g:user_emmet_install_global = 0
  1227. <                        Default value: 1.
  1228.                         See |emmet-customize-key-mappings|.
  1229.  
  1230. g:user_emmet_install_command                    *g:user_emmet_install_command*
  1231.                         If set to 1, Emmet will create command |:Emmet|.
  1232.                         Set to 0 to prevent these: >
  1233.                           let g:user_emmet_install_command = 0
  1234. <                        Default value: 1.
  1235.  
  1236. g:user_emmet_settings                                  *g:user_emmet_settings*
  1237.                         |Dictionary|, which contains user settings.
  1238.                         User settings will override default settings.
  1239.                         Default settings can be found in file
  1240.                         'emmet/autoload/emmet.vim';
  1241.                         search for variable 's:emmet_settings'.
  1242.                         Dictionary has the same structure
  1243.                         as 's:emmet_settings'.
  1244.                         See also: |emmet-indent-size|,
  1245.                         |emmet-define-tags-behavior|, |emmet-custom-snippets|
  1246.  
  1247. g:user_emmet_mode                                          *g:user_emmet_mode*
  1248.                         String. Choose modes, in which
  1249.                         Emmet mappings will be created.
  1250.                         Default value: 'a' - all modes.
  1251.                         'n' - normal mode.
  1252.                         'i' - insert mode.
  1253.                         'v' - visual mode.
  1254.                         Examples: >
  1255.                           " create Emmet mappings only for normal mode
  1256.                           let g:user_emmet_mode = 'n'
  1257.                           " create Emmet mappings
  1258.                           " for insert, normal and visual modes
  1259.                           let g:user_emmet_mode = 'inv'
  1260.                           " create Emmet mappings for all modes
  1261.                           let g:user_emmet_mode = 'a'
  1262. <
  1263. ==============================================================================
  1264. CUSTOMIZE                                                    *emmet-customize*
  1265.  
  1266. 1. Key mapping                                  *emmet-customize-key-mappings*
  1267.  
  1268.   To specify leading key for expanding or balance tag, or for all,
  1269.   Add this line in your 'vimrc': >
  1270. >
  1271.   let g:user_emmet_leader_key = '<C-y>'
  1272. <
  1273.   Note that to expand abbreviation a trailing ',' must be typed, so
  1274.   the resultant keymap is '<C-y>,'.
  1275.  
  1276.   If you prefer to map for each actions separately, use following valuables:
  1277. >
  1278.   let g:user_emmet_expandabbr_key = '<C-y>,'
  1279.   let g:user_emmet_expandword_key = '<C-y>;'
  1280.   let g:user_emmet_update_tag = '<C-y>u'
  1281.   let g:user_emmet_balancetaginward_key = '<C-y>d'
  1282.   let g:user_emmet_balancetagoutward_key = '<C-y>D'
  1283.   let g:user_emmet_next_key = '<C-y>n'
  1284.   let g:user_emmet_prev_key = '<C-y>N'
  1285.   let g:user_emmet_imagesize_key = '<C-y>i'
  1286.   let g:user_emmet_togglecomment_key = '<C-y>/'
  1287.   let g:user_emmet_splitjointag_key = '<C-y>j'
  1288.   let g:user_emmet_removetag_key = '<C-y>k'
  1289.   let g:user_emmet_anchorizeurl_key = '<C-y>a'
  1290.   let g:user_emmet_anchorizesummary_key = '<C-y>A'
  1291.   let g:user_emmet_mergelines_key = '<C-y>m'
  1292.   let g:user_emmet_codepretty_key = '<C-y>c'
  1293. <
  1294.   Or you can use following <plug> mappings:
  1295. >
  1296.   imap   <C-y>,   <plug>(emmet-expand-abbr)
  1297.   imap   <C-y>;   <plug>(emmet-expand-word)
  1298.   imap   <C-y>u   <plug>(emmet-update-tag)
  1299.   imap   <C-y>d   <plug>(emmet-balance-tag-inward)
  1300.   imap   <C-y>D   <plug>(emmet-balance-tag-outward)
  1301.   imap   <C-y>n   <plug>(emmet-move-next)
  1302.   imap   <C-y>N   <plug>(emmet-move-prev)
  1303.   imap   <C-y>i   <plug>(emmet-image-size)
  1304.   imap   <C-y>/   <plug>(emmet-toggle-comment)
  1305.   imap   <C-y>j   <plug>(emmet-split-join-tag)
  1306.   imap   <C-y>k   <plug>(emmet-remove-tag)
  1307.   imap   <C-y>a   <plug>(emmet-anchorize-url)
  1308.   imap   <C-y>A   <plug>(emmet-anchorize-summary)
  1309.   imap   <C-y>m   <plug>(emmet-merge-lines)
  1310.   imap   <C-y>c   <plug>(emmet-code-pretty)
  1311. <
  1312.   You can make the mapping affected only for a filetype you want.
  1313. >
  1314.   let g:user_emmet_install_global = 0
  1315.   autocmd FileType css imap <tab> <plug>(emmet-expand-abbr)
  1316. <
  1317. 2. Indent size                                             *emmet-indent-size*
  1318.  
  1319.   To change indent size of html, add following code in your 'vimrc':
  1320. >
  1321.   let g:user_emmet_settings = {
  1322.   \    'html' : {
  1323.   \        'indentation' : ' '
  1324.   \    },
  1325.   \}
  1326. <
  1327.   If you prefer to change global indent size then add this:
  1328. >
  1329.   let g:user_emmet_settings = {
  1330.   \    'indentation' : ' '
  1331.   \}
  1332. <
  1333.   Filetype dependent indent size will override global indent size.
  1334.  
  1335. 3. Define tag's behavior                          *emmet-define-tags-behavior*
  1336.  
  1337.   User can create abbreviations and snippets for each filetypes
  1338.   using |g:user_emmet_settings|. For details, see official site of Emmet.
  1339.   For example, user can add following:
  1340. >
  1341.   let g:user_emmet_settings = {
  1342.   \    'variables' : {
  1343.   \        'lang' : 'ja',
  1344.   \    },
  1345.   \    'html' : {
  1346.   \        'filters' : 'html',
  1347.   \        'indentation' : ' ',
  1348.   \        'expandos' : {
  1349.   \            'ol': 'ol>li',
  1350.   \            'list': 'ul>li*3',
  1351.   \        },
  1352.   \        'default_attributes': {
  1353.   \            'a': {'href': ''},
  1354.   \            'link': [{'rel': 'stylesheet'}, {'href': ''}],
  1355.   \        },
  1356.   \        'aliases': {
  1357.   \            'bq': 'blockquote',
  1358.   \            'obj': 'object',
  1359.   \            'src': 'source',
  1360.   \        },
  1361.   \        'empty_elements': 'area,base,basefont,...,isindex,link,meta,...',
  1362.   \        'block_elements': 'address,applet,blockquote,...,li,link,map,...',
  1363.   \        'inline_elements': 'a,abbr,acronym,...',
  1364.   \        'empty_element_suffix': ' />',
  1365.   \    },
  1366.   \    'perl' : {
  1367.   \        'indentation' : '  ',
  1368.   \        'aliases' : {
  1369.   \            'req' : "require '|'"
  1370.   \        },
  1371.   \        'snippets' : {
  1372.   \            'use' : "use strict\nuse warnings\n\n",
  1373.   \            'w' : "warn \"${cursor}\";",
  1374.   \        },
  1375.   \    },
  1376.   \    'php' : {
  1377.   \        'extends' : 'html',
  1378.   \        'filters' : 'html,c',
  1379.   \    },
  1380.   \    'css' : {
  1381.   \        'filters' : 'fc',
  1382.   \    },
  1383.   \    'javascript' : {
  1384.   \        'snippets' : {
  1385.   \            'jq' : "\\$(function() {\n\t${cursor}${child}\n});",
  1386.   \            'jq:each' : "\\$.each(arr, function(index, item)\n\t${child}\n});",
  1387.   \            'fn' : "(function() {\n\t${cursor}\n})();",
  1388.   \            'tm' : "setTimeout(function() {\n\t${cursor}\n}, 100);",
  1389.   \        },
  1390.   \    },
  1391.   \    'java' : {
  1392.   \        'indentation' : '    ',
  1393.   \        'snippets' : {
  1394.   \            'main': "public static void main(String[] args) {\n\t|\n}",
  1395.   \            'println': "System.out.println(\"|\");",
  1396.   \            'class': "public class | {\n}\n",
  1397.   \        },
  1398.   \    },
  1399.   \}
  1400. <
  1401.   As you can see, at first level of tree are filetype names.
  1402.   The second level of tree contains definition of abbreviations, snippets and
  1403.   values of some options.
  1404.                                                                *emmet-snippet*
  1405.   Snippets are just blocks of plain code,
  1406.   just like in all programmers' editors. You can type anything there and
  1407.   it will be outputted 'as-is', without any transformation.
  1408.  
  1409.   Bar '|' and '${cursor}' points to cursor position.
  1410.   '${child}' points to position of children elements
  1411.   (for example, in expression 'p>span' 'span' is children of 'p').
  1412.                                                           *emmet-abbreviation*
  1413.   Emmet parses tree and retrieves the following data:
  1414.   - element name;
  1415.   - default attributes;
  1416.   - attributes' order;
  1417.   - attributes' default values;
  1418.   - should element contain closing tag.
  1419.  
  1420.   Let's take a closer look on HTML abbreviations' definitions above.
  1421.   The 'link' element is defined as
  1422. >
  1423.   let g:user_emmet_settings = {
  1424.        ...
  1425.   \    'html': {
  1426.            ...
  1427.   \        'default_attributes': {
  1428.                ...
  1429.                'link': [{'rel': 'stylesheet'}, {'href': ''}],
  1430.   \        },
  1431.            ...
  1432.   \        'empty_elements': '...,link,...',
  1433.   \        'block_elements': '...,link,...',
  1434.   \        'empty_element_suffix': ' />',
  1435.   \    },
  1436.        ...
  1437.   \}
  1438. <
  1439.   This definition says that tag, generated for 'link' abbreviation,
  1440.   should be named 'link' and should contain two attributes:
  1441.   'rel' with default value 'stylesheet' and 'href' with empty value
  1442.   (exactly in this order), and
  1443.   generated element should not contain closing tag.
  1444.  
  1445.   When the link abbreviation is expanded,
  1446.   you'll receive the following output for HTML syntax:
  1447. >
  1448.   <link rel="stylesheet" href="" />
  1449. <
  1450.   You can override default attribute values and add new ones as well:
  1451. >
  1452.   link[rel=prefetch title="Hello world"]
  1453. <
  1454.   expands to
  1455. >
  1456.   <link rel="prefetch" href="" title="Hello world" />
  1457. <                                                                *emmet-alias*
  1458.   Aliases are short-hands for commonly used abbreviations.
  1459.   Aliases can be used to define:
  1460.   - short names for long tag names;
  1461.   - referencing commonly used abbreviations.
  1462. >
  1463.   let g:user_emmet_settings = {
  1464.        ...
  1465.   \    'html': {
  1466.            ...
  1467.   \        'aliases': {
  1468.                ...
  1469.                'bq': 'blockquote',
  1470.            },
  1471.            'expandos': {
  1472.                ...
  1473.                'ol': 'ol>li',
  1474.            },
  1475.            ...
  1476.   \    },
  1477.        ....
  1478.   \}
  1479. <
  1480.   In the example above, when you expand abbreviation,
  1481. >
  1482.   bq
  1483. <
  1484.   Emmet will look for 'blockquote' abbreviation's definition.
  1485.   If it doesn't exist, it will simply output element
  1486. >
  1487.   <blockquote></blockquote>
  1488. <
  1489.   The 'ol' abbreviation actually outputs the same result as 'ol>li' does:
  1490. >
  1491.   <ol>
  1492.       <li></li>
  1493.   </ol>
  1494. <                                                               *emmet-filter*
  1495.   Filters are special post-processors that modify expanded abbreviation
  1496.   right before output to the editor. To better understand how filters work,
  1497.   let's walk through a simple tutorial.
  1498.  
  1499.   Try to expand the following abbreviation:
  1500. >
  1501.   #content>p.title
  1502. <
  1503.   As you may expect, it will be expanded into the following HTML code:
  1504. >
  1505.   <div id="content">
  1506.       <p class="title"></p>
  1507.   </div>
  1508. <
  1509.   Now, try to expand this abbreviation:
  1510. >
  1511.   #content>p.title|e
  1512. <
  1513.   You'll have a slightly different result:
  1514. >
  1515.   &lt;div id="content"&gt;
  1516.       &lt;p class="title"&gt;&lt;/p&gt;
  1517.   &lt;/div&gt;
  1518. <
  1519.   We've just applied 'e' (escape) filter by appending its name
  1520.   after pipe character '|'.
  1521.   This filter had escaped all XML-unsafe symbols with entities
  1522.   (see |emmet-filter-e|) right before Emmet sent output to the editor.
  1523.  
  1524.   Let's do something more interesting. Try to expand this abbreviation:
  1525. >
  1526.   #content>p.title|haml
  1527. <
  1528.   Result:
  1529. >
  1530.   #content
  1531.       %p.title
  1532. <
  1533.   We've just expanded abbreviation as a HAML template.
  1534.  
  1535.   As you can see, filtering is a key concept of Emmet. To draw an analogy
  1536.   with the browser's DOM model, every time you expand abbreviation
  1537.   it first gets transformed into a tree and
  1538.   then filter walks on each tree node and modifies its output.
  1539.   Filters can do anything: from small tweaks
  1540.   as placing whitespace after CSS-rule to more complex tasks
  1541.   as outputting result in different syntax. Even HTML output is defined
  1542.   as 'html' filter.
  1543.  
  1544.   You can apply filter to abbreviation explicitly,
  1545.   by adding pipe character '|' and its name right after abbreviation.
  1546.   But filters also can be applied implicitly, depending on document type
  1547.   you're currently editing. Default filters are defined to each filetype:
  1548. >
  1549.   let g:user_emmet_settings = {
  1550.        ...
  1551.   \    'html' : {
  1552.            ...
  1553.            'filters': 'html',
  1554.   \    },
  1555.   \    'css' : {
  1556.   \        'filters': 'fc',
  1557.            ...
  1558.   \    },
  1559.        ...
  1560.   \}
  1561. <
  1562.   If there's no filter specified, 'html' filter is applied by default.
  1563.   If you want to apply more than one filter by default,
  1564.   you can write a comma-separated list of filter names in filters section:
  1565. >
  1566.   let g:user_emmet_settings = {
  1567.        ...
  1568.   \    'html' : {
  1569.            ...
  1570.            'filters': 'html,e',
  1571.   \    },
  1572.        ...
  1573.   \}
  1574. <
  1575.   Now, every time you expand abbreviation in HTML document,
  1576.   'html' and 'e' filters will be applied by default.
  1577.  
  1578.   But be careful. You always have to place one of the filetype filter
  1579.   ('html', 'haml', etc) at first place of default filters,
  1580.   otherwise you'll have empty output because syntax filters
  1581.   are defining primary output result.
  1582.  
  1583.   Number of available filters listed below (|emmet-filters-list|).
  1584.  
  1585. 4. Adding custom snippets                              *emmet-custom-snippets*
  1586.  
  1587.   If you have installed the |webapi| (https://github.com/mattn/webapi-vim)
  1588.   for |emmet| you can also add your own snippets
  1589.   using a custom 'snippets.json' file.
  1590.  
  1591.   Once you have installed the |webapi| add this line to your 'vimrc':
  1592. >
  1593.   let g:user_emmet_settings = webapi#json#decode(
  1594.   \  join( readfile( expand( '~/.snippets_custom.json' ) ), "\n" ) )
  1595. <
  1596.   You can change the path to your 'snippets_custom.json'
  1597.   according to your preferences.
  1598.  
  1599.   See http://docs.emmet.io/customization/snippets/
  1600.   to find instructions about creating
  1601.   your customized 'snippets.json' file.
  1602.  
  1603. ==============================================================================
  1604. FILTERS                                                   *emmet-filters-list*
  1605.  
  1606.   Filter described above (see |emmet-filter|).
  1607.   Some available filters listed in the following table.
  1608.   For more details see http://docs.emmet.io/filters/ and source code.
  1609.  
  1610.   Filter   Description                                        Link ~
  1611.   html     Applies by default everywhere except HAML files
  1612.   haml     Applies by default for 'haml' filetype
  1613.   xsl      Applies by default for 'haml' filetype
  1614.   e        Escapes XML-unsafe characters                     |emmet-filter-e|
  1615.   c        Add comments around 'important tags'              |emmet-filter-c|
  1616.   s        Outputs as a single line                          |emmet-filter-s|
  1617.   t        Trim list markers                                 |emmet-filter-t|
  1618.  
  1619.   'html', 'haml', 'xsl' filters will expand filetype specific abbreviations.
  1620.   For full list of available abbreviations and snippets
  1621.   see http://docs.emmet.io/cheat-sheet/
  1622.   or file 'emmet/autoload/emmet.vim' (search for variable 's:emmet_settings').
  1623.   Also see |emmet-define-tags-behavior|.
  1624.                                                               *emmet-filter-e*
  1625.   'e' (escape) filter replace XML-unsafe characters: '<', '>' and '&'
  1626.   to entities: '&lt;', '&gt;', '&amp;'.
  1627.  
  1628.   For example
  1629. >
  1630.   #header|e
  1631. <
  1632.   will expand to
  1633. >
  1634.   &lt;div id="header"&gt;&lt;/div&gt;
  1635. <
  1636.                                                               *emmet-filter-c*
  1637.   'c' (comment) filter add comments around 'important tags'.
  1638.   By default, 'important tags' are those tags
  1639.   with 'id' and/or 'class' attribute.
  1640.  
  1641.   For example
  1642. >
  1643.   #page|c
  1644. <
  1645.   will be expanded into
  1646. >
  1647.   <!-- #page -->
  1648.   <div id="page"></div>
  1649.   <!-- /#page -->
  1650. <
  1651.   Expression
  1652. >
  1653.   p.title|c
  1654. <
  1655.   become
  1656. >
  1657.   <!-- .title -->
  1658.   <p class="title"></p>
  1659.   <!-- /.title -->
  1660. <
  1661.   More complex expression
  1662. >
  1663.   div>#page>p.title+p|c
  1664. <
  1665.   will be transformed into
  1666. >
  1667.   <div>
  1668.       <!-- #page -->
  1669.       <div id="page">
  1670.           <!-- .title -->
  1671.           <p class="title"></p>
  1672.           <!-- /.title -->
  1673.           <p></p>
  1674.       </div>
  1675.       <!-- /#page -->
  1676.   </div>
  1677. <
  1678.   To insert only second comment use the following code:
  1679. >
  1680.   let g:user_emmet_settings = {
  1681.        ...
  1682.   \    'html' : {
  1683.            ...
  1684.            'comment_type': 'lastonly',
  1685.   \    },
  1686.        ...
  1687.   \}
  1688. <
  1689.   'comment_type' default value is 'both'.
  1690.                                                               *emmet-filter-s*
  1691.   's' (single line) filter removes newline characters, so
  1692.   abbreviation will be expanded into single line:
  1693. >
  1694.   ul>li*4|s
  1695. <
  1696.   becomes to
  1697. >
  1698.   <ul><li></li><li></li><li></li><li></li></ul>
  1699. <
  1700.                                                               *emmet-filter-t*
  1701.   't' (trim) filter removes trailing whitespace characters and
  1702.   list markers, such as '1.', '2.', '3.', '-'.
  1703.  
  1704.   For example, do visual select (line wise) following text:
  1705. >
  1706.   1. First
  1707.   2. Second
  1708.   3. Third
  1709. <
  1710.   Then press '<C-y>,' (|emmet-wrap-with-abbreviation|) and type expression
  1711. >
  1712.   ul>li*|t
  1713. <
  1714.   Result:
  1715. >
  1716.   <ul>
  1717.       <li>First</li>
  1718.       <li>Second</li>
  1719.       <li>Third</li>
  1720.   </ul>
  1721. <
  1722. ==============================================================================
  1723. LINKS                                                            *emmet-links*
  1724.  
  1725. Emmet official site:
  1726.   http://emmet.io/
  1727.  
  1728. Emmet documentation:
  1729.   http://docs.emmet.io/
  1730.  
  1731. Emmet cheat sheet:
  1732.   http://docs.emmet.io/cheat-sheet/
  1733.  
  1734. Emmet vim plugin repository:
  1735.   https://github.com/mattn/emmet-vim
  1736.  
  1737.   Emmet (developed since 2012) is successor of
  1738.   zen-coding (developed since 2009).
  1739.  
  1740. zen-coding official site:
  1741.   http://code.google.com/p/zen-coding/
  1742.  
  1743. zen-coding official site:
  1744.   http://code.google.com/p/zen-coding/
  1745.  
  1746. zen-coding vim plugin repository:
  1747.   http://mattn.github.com/zencoding-vim
  1748.  
  1749. zen-coding development repository:
  1750.   https://github.com/mattn/zencoding-vim
  1751.  
  1752. My blog posts about zencoding-vim (japanese):
  1753.   http://mattn.kaoriya.net/software/vim/20100222103327.htm
  1754.   http://mattn.kaoriya.net/software/vim/20100306021632.htm
  1755.  
  1756. Japanese blog posts about zencoding-vim:
  1757.   http://d.hatena.ne.jp/idesaku/20100424/1272092255
  1758.   http://d.hatena.ne.jp/griefworker/20110118/vim_zen_coding
  1759.   http://d.hatena.ne.jp/sakurako_s/20110126/1295988873
  1760.   http://looxu.blogspot.jp/2010/02/zencodingvimhtml.html
  1761.  
  1762. Tutorial translated in chinese:
  1763.   http://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html
  1764.  
  1765. ==============================================================================
  1766. TODO                                                              *emmet-todo*
  1767.   * wrapping inline selected.
  1768.   * more documents.
  1769.   * more contributor.
  1770.   * more time to improve emmet.vim.
  1771.  
  1772. ==============================================================================
  1773. vim: filetype=help expandtab textwidth=78 tabstop=8 norightleft foldenable foldlevel=0 :
  1774.  
downloademmet.txt Source code - Download emmet-vim Source code
Related Source Codes/Software:
rq - Simple job queues for Python ht... 2017-01-08
amazon-dsstne - Deep Scalable Sparse Tensor Network Engine (DSSTNE... 2017-01-08
webpack-demos - a collection of simple demos of Webpack 2017-01-08
Squire - HTML5 rich text editor. Try the demo integration a... 2017-01-08
thor - Thor is a toolkit for building powerful command-li... 2017-01-08
prose - A Content Editor for GitHub. ht... 2017-01-08
sshrc - ring your .bashrc, .vimrc, etc. with you when you ... 2017-01-08
typed.js - A jQuery typing animation script. ... 2017-01-08
find - High-precision indoor positioning framework for mo... 2017-01-08
Amethyst - Automatic tiling window manager for macOS a la xmo... 2017-01-08
Pico - Pico is a stupidly simple, blazing fast, flat file... 2017-02-18
profiling - An interactive continuous Python profiler. 2017-02-18
AQGridView - A grid view for iPhone/iPad, designed to look simi... 2017-02-18
SCLAlertView - Beautiful animated Alert View. Written in Objectiv... 2017-02-18
csvkit - A suite of utilities for converting to and working... 2017-02-18
Messenger - This is a native iOS Messenger app, making realtim... 2017-02-18
meteor-up - Production Quality Meteor Deployment 2017-02-18
book-of-modern-frontend-tooling - The Front-end Tooling Book 2017-02-17
sorcery - Magical authentication for Rails 3 & 4 2017-02-17
iScript - Xiami.com script--about shrimp, Baidu's Web site, ... 2017-02-17

 Back to top