emmet-mode

<div>
  <h1>emmet-mode</h1>
  <p>
    <a href="https://github.com/smihica/emmet.git">https://github.com/smihica/emmet.git</a>
  </p>

  
    <code class="clone">
    git clone 'git://github.com/smihica/emmet.git'
      <br>
    </code>
  

  <div class="star-area">
    <span class="starlabel">&#9733;</span><span class="stars">252</span>
  </div>
  <hr>
  
    <p><strong>This is a fork of <a href="https://github.com/rooney/zencoding" >zencoding-mode</a> to support <a href="http://emmet.io/" >Emmet</a>&apos;s feature set.</strong></p>

<h2>About zencoding-mode</h2>

<p><a href="https://github.com/rooney/zencoding" >zencoding-mode</a> is a minor mode providing support for Zen Coding by producing HTML from CSS-like selectors. See <a href="https://github.com/rooney/zencoding/blob/master/README.md" >README</a></p>

<h2>About Emmet</h2>

<p>Zen Coding has been renamed to <a href="http://emmet.io/" >Emmet</a> and includes an expanded feature set.</p>

<h2>Abbreviation Examples</h2>

<ul>
<li><a href="https://github.com/smihica/emmet#html-abbreviations" >HTML abbreviations</a></li>
<li><a href="https://github.com/smihica/emmet#css-abbreviations" >CSS abbreviations</a></li>
</ul>

<h2>Emmet Actions</h2>

<ul>
<li><a href="https://github.com/smihica/emmet#go-to-edit-point" >Go to Edit Point</a></li>
</ul>

<h2>Supported Emacs</h2>

<p><code>emmet-mode</code> is supported by GNU Emacs versions from 23 onward.</p>

<h2>Installation</h2>

<h3>1. From marmalade or MELPA</h3>

<p>If your Emacs has the <a href="http://marmalade-repo.org/" >marmalade</a> or <a href="http://melpa.milkbox.net/" >MELPA</a> package repositories installed, just type <code>M-x package-list-packages</code>, search for <code>emmet-mode</code>, and install it.</p>

<h3>1. Manual Installation</h3>

<p>Just make sure emmet-mode.el is in your <code>load-path</code>.</p>

<h3>2. Settings to use.</h3>

<p>If you manually installed emmet-mode to <code>~/emacs.d/emmet-mode/</code>, add the following lines to your init.el or .emacs:</p>

<pre><code>(add-to-list 'load-path &quot;~/emacs.d/emmet-mode&quot;)
(require 'emmet-mode)
</code></pre>

<p>If you installed from marmalade/MELPA then these you shouldn&apos;t need to do this.</p>

<p>Enable it by running <code>M-x emmet-mode</code>.</p>

<h3>3. Optional settings</h3>

<p>You probably want to add it to auto-load on your sgml modes:</p>

<pre><code>(add-hook 'sgml-mode-hook 'emmet-mode) ;; Auto-start on any markup modes
(add-hook 'css-mode-hook  'emmet-mode) ;; enable Emmet's css abbreviation.
</code></pre>

<p>By default, inserted markup will be indented with indent-region, according to the buffer&apos;s mode.  To disable this, do:</p>

<pre><code>(add-hook 'emmet-mode-hook (lambda () (setq emmet-indent-after-insert nil)))
</code></pre>

<p>If you disable indent-region, you can set the default indent level thusly:</p>

<pre><code>(add-hook 'emmet-mode-hook (lambda () (setq emmet-indentation 2))) ;; indent 2 spaces.
</code></pre>

<p>If you want the cursor to be positioned between first empty quotes after expanding:</p>

<pre><code>(setq emmet-move-cursor-between-quotes t) ;; default nil
</code></pre>

<p>Or if you don&apos;t want to move cursor after expanding:</p>

<pre><code>(setq emmet-move-cursor-after-expanding nil) ;; default t
</code></pre>

<h2>Usage</h2>

<p>Place point in a emmet snippet and press C-j to expand it (or alternatively,
alias your preferred keystroke to M-x emmet-expand-line) and
you&apos;ll transform your snippet into the appropriate tag structure.</p>

<h2>HTML abbreviations</h2>

<h4>Basic tags</h4>

<pre><code>a                        &lt;a href=&quot;&quot;&gt;&lt;/a&gt;
a.x                      &lt;a class=&quot;x&quot; href=&quot;&quot;&gt;&lt;/a&gt;
a#q.x                    &lt;a id=&quot;q&quot; class=&quot;x&quot; href=&quot;&quot;&gt;&lt;/a&gt;
a#q.x.y.z                &lt;a id=&quot;q&quot; class=&quot;x y z&quot; href=&quot;&quot;&gt;&lt;/a&gt;
#q                       &lt;div id=&quot;q&quot;&gt;
                         &lt;/div&gt;
.x                       &lt;div class=&quot;x&quot;&gt;
                         &lt;/div&gt;
#q.x                     &lt;div id=&quot;q&quot; class=&quot;x&quot;&gt;
                         &lt;/div&gt;
#q.x.y.z                 &lt;div id=&quot;q&quot; class=&quot;x y z&quot;&gt;
                         &lt;/div&gt;
</code></pre>

<h4>Empty tags</h4>

<pre><code>a/                       &lt;a href=&quot;&quot;/&gt;
a/.x                     &lt;a class=&quot;x&quot; href=&quot;&quot;/&gt;
a/#q.x                   &lt;a id=&quot;q&quot; class=&quot;x&quot; href=&quot;&quot;/&gt;
a/#q.x.y.z               &lt;a id=&quot;q&quot; class=&quot;x y z&quot; href=&quot;&quot;/&gt;
</code></pre>

<h4>Self-closing tags</h4>

<pre><code>input[type=text]         &lt;input type=&quot;text&quot; name=&quot;&quot; value=&quot;&quot;/&gt;
img                      &lt;img src=&quot;&quot; alt=&quot;&quot;/&gt;
img&gt;metadata/*2          &lt;img src=&quot;&quot; alt=&quot;&quot;&gt;
                             &lt;metadata/&gt;
                             &lt;metadata/&gt;
                         &lt;/img&gt;
</code></pre>

<h4>Siblings</h4>

<pre><code>a+b                      &lt;a href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;b&gt;&lt;/b&gt;
a+b+c                    &lt;a href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;b&gt;&lt;/b&gt;
                         &lt;c&gt;&lt;/c&gt;
a.x+b                    &lt;a class=&quot;x&quot; href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;b&gt;&lt;/b&gt;
a#q.x+b                  &lt;a id=&quot;q&quot; class=&quot;x&quot; href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;b&gt;&lt;/b&gt;
a#q.x.y.z+b              &lt;a id=&quot;q&quot; class=&quot;x y z&quot; href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;b&gt;&lt;/b&gt;
a#q.x.y.z+b#p.l.m.n      &lt;a id=&quot;q&quot; class=&quot;x y z&quot; href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;b id=&quot;p&quot; class=&quot;l m n&quot;&gt;&lt;/b&gt;
</code></pre>

<h4>Tag expansion</h4>

<pre><code>table+                   &lt;table&gt;
                             &lt;tr&gt;
                                 &lt;td&gt;
                                 &lt;/td&gt;
                             &lt;/tr&gt;
                         &lt;/table&gt;
dl+                      &lt;dl&gt;
                             &lt;dt&gt;&lt;/dt&gt;
                             &lt;dd&gt;&lt;/dd&gt;
                         &lt;/dl&gt;
ul+                      &lt;ul&gt;
                             &lt;li&gt;&lt;/li&gt;
                         &lt;/ul&gt;
ul++ol+                  &lt;ul&gt;
                             &lt;li&gt;&lt;/li&gt;
                         &lt;/ul&gt;
                         &lt;ol&gt;
                             &lt;li&gt;&lt;/li&gt;
                         &lt;/ol&gt;
ul#q.x.y[m=l]            &lt;ul id=&quot;q&quot; class=&quot;x y&quot; m=&quot;l&quot;&gt;
                             &lt;li&gt;&lt;/li&gt;
                         &lt;/ul&gt;
</code></pre>

<h4>Parent &gt; child</h4>

<pre><code>a&gt;b                      &lt;a href=&quot;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;
a&gt;b&gt;c                    &lt;a href=&quot;&quot;&gt;&lt;b&gt;&lt;c&gt;&lt;/c&gt;&lt;/b&gt;&lt;/a&gt;
a.x&gt;b                    &lt;a class=&quot;x&quot; href=&quot;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;
a#q.x&gt;b                  &lt;a id=&quot;q&quot; class=&quot;x&quot; href=&quot;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;
a#q.x.y.z&gt;b              &lt;a id=&quot;q&quot; class=&quot;x y z&quot; href=&quot;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;
a#q.x.y.z&gt;b#p.l.m.n      &lt;a id=&quot;q&quot; class=&quot;x y z&quot; href=&quot;&quot;&gt;&lt;b id=&quot;p&quot; class=&quot;l m n&quot;&gt;&lt;/b&gt;&lt;/a&gt;
#q&gt;.x                    &lt;div id=&quot;q&quot;&gt;
                             &lt;div class=&quot;x&quot;&gt;
                             &lt;/div&gt;
                         &lt;/div&gt;
a&gt;b+c                    &lt;a href=&quot;&quot;&gt;
                             &lt;b&gt;&lt;/b&gt;
                             &lt;c&gt;&lt;/c&gt;
                         &lt;/a&gt;
a&gt;b+c&gt;d                  &lt;a href=&quot;&quot;&gt;
                             &lt;b&gt;&lt;/b&gt;
                             &lt;c&gt;&lt;d&gt;&lt;/d&gt;&lt;/c&gt;
                         &lt;/a&gt;
</code></pre>

<h4>Climb-up</h4>

<pre><code>a&gt;b^c                    &lt;a href=&quot;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;&lt;c&gt;&lt;/c&gt;
a&gt;b&gt;c^d                  &lt;a href=&quot;&quot;&gt;
                             &lt;b&gt;&lt;c&gt;&lt;/c&gt;&lt;/b&gt;
                             &lt;d&gt;&lt;/d&gt;
                         &lt;/a&gt;
a&gt;b&gt;c^^d                 &lt;a href=&quot;&quot;&gt;&lt;b&gt;&lt;c&gt;&lt;/c&gt;&lt;/b&gt;&lt;/a&gt;
                         &lt;d&gt;&lt;/d&gt;
</code></pre>

<h4>Multiplication</h4>

<pre><code>a*1                      &lt;a href=&quot;&quot;&gt;&lt;/a&gt;
a*2                      &lt;a href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;a href=&quot;&quot;&gt;&lt;/a&gt;
a/*2                     &lt;a href=&quot;&quot;/&gt;
                         &lt;a href=&quot;&quot;/&gt;
a*2+b*2                  &lt;a href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;a href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;b&gt;&lt;/b&gt;
                         &lt;b&gt;&lt;/b&gt;
a*2&gt;b*2                  &lt;a href=&quot;&quot;&gt;
                             &lt;b&gt;&lt;/b&gt;
                             &lt;b&gt;&lt;/b&gt;
                         &lt;/a&gt;
                         &lt;a href=&quot;&quot;&gt;
                             &lt;b&gt;&lt;/b&gt;
                             &lt;b&gt;&lt;/b&gt;
                         &lt;/a&gt;
a&gt;b*2                    &lt;a href=&quot;&quot;&gt;
                             &lt;b&gt;&lt;/b&gt;
                             &lt;b&gt;&lt;/b&gt;
                         &lt;/a&gt;
a#q.x&gt;b#q.x*2            &lt;a id=&quot;q&quot; class=&quot;x&quot; href=&quot;&quot;&gt;
                             &lt;b id=&quot;q&quot; class=&quot;x&quot;&gt;&lt;/b&gt;
                             &lt;b id=&quot;q&quot; class=&quot;x&quot;&gt;&lt;/b&gt;
                         &lt;/a&gt;
a#q.x&gt;b/#q.x*2           &lt;a id=&quot;q&quot; class=&quot;x&quot; href=&quot;&quot;&gt;
                             &lt;b id=&quot;q&quot; class=&quot;x&quot;/&gt;
                             &lt;b id=&quot;q&quot; class=&quot;x&quot;/&gt;
                         &lt;/a&gt;
</code></pre>

<h4>Item numbering</h4>

<pre><code>ul&gt;li.item$*3            &lt;ul&gt;
                             &lt;li class=&quot;item1&quot;&gt;&lt;/li&gt;
                             &lt;li class=&quot;item2&quot;&gt;&lt;/li&gt;
                             &lt;li class=&quot;item3&quot;&gt;&lt;/li&gt;
                         &lt;/ul&gt;
ul&gt;li.item$$$*3          &lt;ul&gt;
                             &lt;li class=&quot;item001&quot;&gt;&lt;/li&gt;
                             &lt;li class=&quot;item002&quot;&gt;&lt;/li&gt;
                             &lt;li class=&quot;item003&quot;&gt;&lt;/li&gt;
                         &lt;/ul&gt;
ul&gt;li.item$@-*3          &lt;ul&gt;
                             &lt;li class=&quot;item3&quot;&gt;&lt;/li&gt;
                             &lt;li class=&quot;item2&quot;&gt;&lt;/li&gt;
                             &lt;li class=&quot;item1&quot;&gt;&lt;/li&gt;
                         &lt;/ul&gt;
ul&gt;li.item$@3*3          &lt;ul&gt;
                             &lt;li class=&quot;item3&quot;&gt;&lt;/li&gt;
                             &lt;li class=&quot;item4&quot;&gt;&lt;/li&gt;
                             &lt;li class=&quot;item5&quot;&gt;&lt;/li&gt;
                         &lt;/ul&gt;
ul&gt;li.item$@-3*3         &lt;ul&gt;
                             &lt;li class=&quot;item5&quot;&gt;&lt;/li&gt;
                             &lt;li class=&quot;item4&quot;&gt;&lt;/li&gt;
                             &lt;li class=&quot;item3&quot;&gt;&lt;/li&gt;
                         &lt;/ul&gt;
a$b$@-/*5                &lt;a1b5/&gt;
                         &lt;a2b4/&gt;
                         &lt;a3b3/&gt;
                         &lt;a4b2/&gt;
                         &lt;a5b1/&gt;
a.$*2&gt;b.$$@-*3           &lt;a class=\&quot;1\&quot; href=&quot;&quot;&gt;
                             &lt;b class=\&quot;03\&quot;&gt;&lt;/b&gt;
                             &lt;b class=\&quot;02\&quot;&gt;&lt;/b&gt;
                             &lt;b class=\&quot;01\&quot;&gt;&lt;/b&gt;
                         &lt;/a&gt;
                         &lt;a class=\&quot;2\&quot; href=&quot;&quot;&gt;
                             &lt;b class=\&quot;03\&quot;&gt;&lt;/b&gt;
                             &lt;b class=\&quot;02\&quot;&gt;&lt;/b&gt;
                             &lt;b class=\&quot;01\&quot;&gt;&lt;/b&gt;
                         &lt;/a&gt;
(div&gt;(a#id$$*2)+b.c$@-3+c#d$)*2
                         &lt;div&gt;
                             &lt;a id=\&quot;id01\&quot; href=&quot;&quot;&gt;&lt;/a&gt;
                             &lt;a id=\&quot;id02\&quot; href=&quot;&quot;&gt;&lt;/a&gt;
                             &lt;b class=\&quot;c4\&quot;&gt;&lt;/b&gt;
                             &lt;c id=\&quot;d1\&quot;&gt;&lt;/c&gt;
                         &lt;/div&gt;
                         &lt;div&gt;
                             &lt;a id=\&quot;id01\&quot; href=&quot;&quot;&gt;&lt;/a&gt;
                             &lt;a id=\&quot;id02\&quot; href=&quot;&quot;&gt;&lt;/a&gt;
                             &lt;b class=\&quot;c3\&quot;&gt;&lt;/b&gt;
                             &lt;c id=\&quot;d2\&quot;&gt;&lt;/c&gt;
                         &lt;/div&gt;
ul&gt;li.c${price: 10\\$}*3 &lt;ul&gt;
                             &lt;li class=\&quot;c1\&quot;&gt;price: 10$&lt;/li&gt;
                             &lt;li class=\&quot;c2\&quot;&gt;price: 10$&lt;/li&gt;
                             &lt;li class=\&quot;c3\&quot;&gt;price: 10$&lt;/li&gt;
                         &lt;/ul&gt;
</code></pre>

<h4>Properties</h4>

<pre><code>b[x]                     &lt;b x=&quot;&quot;&gt;&lt;/b&gt;
b[x=]                    &lt;b x=&quot;&quot;&gt;&lt;/b&gt;
b[x=&quot;&quot;]                  &lt;b x=&quot;&quot;&gt;&lt;/b&gt;
b[x=y]                   &lt;b x=&quot;y&quot;&gt;&lt;/b&gt;
b[x=&quot;y&quot;]                 &lt;b x=&quot;y&quot;&gt;&lt;/b&gt;
b[x=&quot;()&quot;]                &lt;b x=&quot;()&quot;&gt;&lt;/b&gt;
b[x m]                   &lt;b x=&quot;&quot; m=&quot;&quot;&gt;&lt;/b&gt;
b[x= m=&quot;&quot;]               &lt;b x=&quot;&quot; m=&quot;&quot;&gt;&lt;/b&gt;
b[x=y m=l]               &lt;b x=&quot;y&quot; m=&quot;l&quot;&gt;&lt;/b&gt;
b/[x=y m=l]              &lt;b x=&quot;y&quot; m=&quot;l&quot;/&gt;
b#foo[x=y m=l]           &lt;b id=&quot;foo&quot; x=&quot;y&quot; m=&quot;l&quot;&gt;&lt;/b&gt;
b.foo[x=y m=l]           &lt;b class=&quot;foo&quot; x=&quot;y&quot; m=&quot;l&quot;&gt;&lt;/b&gt;
b#foo.bar.mu[x=y m=l]    &lt;b id=&quot;foo&quot; class=&quot;bar mu&quot; x=&quot;y&quot; m=&quot;l&quot;&gt;&lt;/b&gt;
b/#foo.bar.mu[x=y m=l]   &lt;b id=&quot;foo&quot; class=&quot;bar mu&quot; x=&quot;y&quot; m=&quot;l&quot;/&gt;
b[x=y]+b                 &lt;b x=&quot;y&quot;&gt;&lt;/b&gt;
                         &lt;b&gt;&lt;/b&gt;
b[x=y]+b[x=y]            &lt;b x=&quot;y&quot;&gt;&lt;/b&gt;
                         &lt;b x=&quot;y&quot;&gt;&lt;/b&gt;
b[x=y]&gt;b                 &lt;b x=&quot;y&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;
b[x=y]&gt;b[x=y]            &lt;b x=&quot;y&quot;&gt;&lt;b x=&quot;y&quot;&gt;&lt;/b&gt;&lt;/b&gt;
b[x=y]&gt;b[x=y]+c[x=y]     &lt;b x=&quot;y&quot;&gt;
                             &lt;b x=&quot;y&quot;&gt;&lt;/b&gt;
                             &lt;c x=&quot;y&quot;&gt;&lt;/c&gt;
                         &lt;/b&gt;
</code></pre>

<h4>Parentheses</h4>

<pre><code>(a)                      &lt;a href=&quot;&quot;&gt;&lt;/a&gt;
(a)+(b)                  &lt;a href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;b&gt;&lt;/b&gt;
a&gt;(b)                    &lt;a href=&quot;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;
(a&gt;b)&gt;c                  &lt;a href=&quot;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;
(a&gt;b)+c                  &lt;a href=&quot;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;
                         &lt;c&gt;&lt;/c&gt;
z+(a&gt;b)+c+k              &lt;z&gt;&lt;/z&gt;
                         &lt;a href=&quot;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;
                         &lt;c&gt;&lt;/c&gt;
                         &lt;k&gt;&lt;/k&gt;
(x)*2                    &lt;x&gt;&lt;/x&gt;
                         &lt;x&gt;&lt;/x&gt;
((x)*2)                  &lt;x&gt;&lt;/x&gt;
                         &lt;x&gt;&lt;/x&gt;
((x))*2                  &lt;x&gt;&lt;/x&gt;
                         &lt;x&gt;&lt;/x&gt;
(x&gt;b)*2                  &lt;x&gt;&lt;b&gt;&lt;/b&gt;&lt;/x&gt;
                         &lt;x&gt;&lt;b&gt;&lt;/b&gt;&lt;/x&gt;
(x+b)*2                  &lt;x&gt;&lt;/x&gt;
                         &lt;b&gt;&lt;/b&gt;
                         &lt;x&gt;&lt;/x&gt;
                         &lt;b&gt;&lt;/b&gt;
</code></pre>

<h4>Text</h4>

<pre><code>a{Click me}              &lt;a href=&quot;&quot;&gt;Click me&lt;/a&gt;
a&gt;{Click me}*2           &lt;a href=&quot;&quot;&gt;
                             Click me
                             Click me
                         &lt;/a&gt;
x{click}+b{here}         &lt;x&gt;click&lt;/x&gt;
                         &lt;b&gt;here&lt;/b&gt;
span&gt;{click}+b{here}     &lt;span&gt;
                             click
                             &lt;b&gt;here&lt;/b&gt;
                         &lt;/span&gt;
p&gt;{Click}+span{here}+{ to continue}
                         &lt;p&gt;
                             Click
                             &lt;span&gt;here&lt;/span&gt;
                              to continue
                         &lt;/p&gt;
p{Click}+span{here}+{ to continue}
                         &lt;p&gt;
                             Click
                         &lt;/p&gt;
                         &lt;span&gt;here&lt;/span&gt;
                          to continue
p{\{Escape brackets!\} and \\}
                         &lt;p&gt;{Escape brackets} and \&lt;/p&gt;
</code></pre>

<h4>Lorem-Ipsum generator</h4>

<pre><code>lorem                    Diam, vulputate ut pharetra sit amet, aliquam id! Egestas sed tempus, urna et pharetra pharetra, massa massa ultricies mi, quis hendrerit dolor magna eget est lorem ipsum dolor sit amet!
lorem5                   Hendrerit gravida rutrum quisque non?
ipsum3                   Viverra ipsum nunc.
p*3&gt;lorem3               &lt;p&gt;Pellentesque elit eget?&lt;/p&gt;
                         &lt;p&gt;Sed odio morbi?&lt;/p&gt;
                         &lt;p&gt;Eget arcu dictum!&lt;/p&gt;
ul.list&gt;ipsum3*3         &lt;ul class=\&quot;list\&quot;&gt;
                             Nam libero justo.
                             Pellentesque habitant morbi?
                             Enim blandit volutpat.
                         &lt;/ul&gt;
ul.list&gt;ipsum3.itm*3     &lt;ul class=\&quot;list\&quot;&gt;
                             &lt;div class=\&quot;itm\&quot;&gt;Urna condimentum mattis.&lt;/div&gt; &lt;!-- emmet-mode doesn't support implicit tag name resolver --&gt;
                             &lt;div class=\&quot;itm\&quot;&gt;Sed turpis tincidunt.&lt;/div&gt;
                             &lt;div class=\&quot;itm\&quot;&gt;Faucibus turpis in?&lt;/div&gt;
                         &lt;/ul&gt;
ul.list&gt;(li.itm&gt;lorem3)*3
                         &lt;ul class=\&quot;list\&quot;&gt;
                             &lt;li class=\&quot;itm\&quot;&gt;Est pellentesque elit.&lt;/li&gt;
                             &lt;li class=\&quot;itm\&quot;&gt;In nulla posuere.&lt;/li&gt;
                             &lt;li class=\&quot;itm\&quot;&gt;Felis eget nunc.&lt;/li&gt;
                         &lt;/ul&gt;
</code></pre>

<h4>Filter: HTML with comments</h4>

<pre><code>a.b|c                    &lt;!-- .b --&gt;
                         &lt;a class=&quot;b&quot; href=&quot;&quot;&gt;&lt;/a&gt;
                         &lt;!-- /.b --&gt;
#a&gt;.b|c                  &lt;!-- #a --&gt;
                         &lt;div id=&quot;a&quot;&gt;
                             &lt;!-- .b --&gt;
                             &lt;div class=&quot;b&quot;&gt;
                             &lt;/div&gt;
                             &lt;!-- /.b --&gt;
                         &lt;/div&gt;
                         &lt;!-- /#a --&gt;
</code></pre>

<h4>Filter: HAML</h4>

<pre><code>a|haml                   %a
a#q.x.y.z|haml           %a#q.x.y.z
a#q.x[x=y m=l]|haml      %a#q.x{:x =&gt; &quot;y&quot;, :m =&gt; &quot;l&quot;}
div|haml                 %div
div.footer|haml          .footer
.footer|haml             .footer
p&gt;{txt}+a[href=#]+br|haml  %p
                             txt
                             %a{:href =&gt; &quot;#&quot;}
                             %br
</code></pre>

<h4>Filter: Hiccup</h4>

<pre><code>a|hic                    [:a]
a#q.x.y.z|hic            [:a#q.x.y.z]
a#q.x[x=y m=l]|hic       [:a#q.x {:x &quot;y&quot;, :m &quot;l&quot;}]
.footer|hic              [:div.footer]
p&gt;a[href=#]+br|hic       [:p
                             [:a {:href &quot;#&quot;}]
                             [:br]]
#q&gt;(a*2&gt;b{x})+p&gt;b|hic    [:div#q
                             [:a [:b &quot;x&quot;]]
                             [:a [:b &quot;x&quot;]]
                             [:p
                                 [:b]]]
</code></pre>

<h4>Filter: escape</h4>

<pre><code>script[src=&amp;quot;]|e     &amp;lt;script src=&quot;&amp;amp;quot;&quot;&amp;gt;
                         &amp;lt;/script&amp;gt;
</code></pre>

<h4>Aliases</h4>

<pre><code>html:5                   &lt;!doctype html&gt;
                         &lt;html lang=&quot;en&quot;&gt;
                           &lt;head&gt;
                             &lt;meta charset=&quot;UTF-8&quot;/&gt;
                             &lt;title&gt;Document&lt;/title&gt;
                           &lt;/head&gt;
                           &lt;body&gt;
                           &lt;/body&gt;
                         &lt;/html&gt;

html:xt                  &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
                         &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;
                           &lt;head&gt;
                             &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/&gt;
                             &lt;title&gt;Document&lt;/title&gt;
                           &lt;/head&gt;
                         &lt;/html&gt;

meta:vp                  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;/&gt;
</code></pre>

<ul>
<li>See HTML section of <a href="http://docs.emmet.io/cheat-sheet/" >cheat-sheet</a> to find more aliases.</li>
</ul>

<h2>CSS abbreviations</h2>

<h4>Basic Usage</h4>

<pre><code>p1-2!+m10e+bd1#2s        padding: 1px 2px !important;
                         margin: 10em;
                         border: 1px #222 solid;
</code></pre>

<h4>Keywords</h4>

<pre><code>m                        margin: ;
bg+                      background: #fff url() 0 0 no-repeat;
c                        color: #000;
</code></pre>

<ul>
<li>See CSS section of <a href="http://docs.emmet.io/cheat-sheet/" >cheat-sheet</a> to find more keywords.</li>
</ul>

<h4>Values</h4>

<p>separate each value by &apos;-&apos; or &apos; &apos;;</p>

<pre><code>m1-2-3-4                 margin: 1px 2px 3px 4px;
m1 2 3 4                 margin: 1px 2px 3px 4px;
m1--2                    margin: 1px -2px;
m1 -2                    margin: 1px -2px;

bg+#c /back.png 10 20 repeat-x
                         background: #cccccc url(/back.png) 10px 20px repeat-x;
</code></pre>

<h4>Multiple property definition</h4>

<p>concatenate each property by &lsquo;+&rsquo;;</p>

<pre><code>m10+p0                   margin: 10px;
                         padding: 0px;

bg++c#0                  background: #fff url() 0 0 no-repeat;
                         color: #000;

m0+p10+c#f+fw:b+w100+h20+bg#f00
                         margin: 0px;
                         padding: 10px;
                         color: #fff;
                         font-weight: bold;
                         width: 100px;
                         height: 20px;
                         background: #f00;
</code></pre>

<h4>Value units</h4>

<pre><code>m10                      margin: 10px;
m1.5                     margin: 1.5em;
m1.5ex                   margin: 1.5ex;
m1.5x                    margin: 1.5ex;
m10foo                   margin: 10foo;
m10ex20em                margin: 10ex 20em;
m10x20e                  margin: 10ex 20em;
m10x-5                   margin: 10ex -5px;
w100p                    width: 100%;
m10p30e5x                margin: 10% 30em 5ex;
</code></pre>

<ul>
<li><p>Unit-aliases</p>

<pre><code>e                        em
p                        %
x                        ex
r                        rem
</code></pre></li>
</ul>

<h4>Unitless property</h4>

<pre><code>lh2                      line-height: 2;
fw400                    font-weight: 400;
</code></pre>

<h4>Color abbreviations</h4>

<pre><code>c#3                      color: #333;
bd5#0s                   border: 5px #000 solid; /* s: solid, t: dotted, n: none, h: hidden */
bd5#20rgb                border: 5px rgb(32,32,32);
bd5#20rgbt               border: 5px rgb(32,32,32) dotted;
</code></pre>

<ul>
<li><p>Color expansion</p>

<pre><code>#1                       #111
#e0                      #e0e0e0
#fc0                     #fc0
</code></pre></li>
</ul>

<h4>Important</h4>

<pre><code>c#3!+bdrs2!              color: #333 !important;
                         border-radius: 2px !important;
</code></pre>

<ul>
<li>If you want further information, see <a href="http://docs.emmet.io/css-abbreviations/" >Emmet&apos;s documentation</a>.</li>
</ul>

<h2>Actions</h2>

<h3>Go to Edit Point</h3>

<p>Traverse between important code points in HTML.</p>

<ul>
<li><code>&lt;C-M-left&gt;</code> is &ldquo;Previous Edit Point&rdquo; (<code>M-x emmet-prev-edit-point</code>)</li>
<li><code>&lt;C-M-right&gt;</code> is &ldquo;Next Edit Point&rdquo; (<code>M-x emmet-next-edit-point</code>)</li>
</ul>

<p>For further information and demo see <a href="http://docs.emmet.io/actions/go-to-edit-point/" >Emmet&apos;s documentation</a>.</p>

  
</div>