|
HTML
Unknown abbreviations will be expanded as tags. E.g. foo => <foo></foo>.
|
Child: >
|
Climb-up: ^
|
|
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
|
div>p>span+em^bq
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
|
|
Sibling: +
|
Custom attributes
|
|
div+p
<div></div>
<p></p>
|
p[title="Hello world"]
<p title="Hello world"></p>
td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
|
|
Multiplication: *
|
Text: {}
|
|
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
|
a{Click me}
<a href="">Click me</a>
p{@lorem4}
<p>Lorem Ipsum quisque etiam.</p>
|
|
Item numbering: $
|
Id and class attributes
|
|
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
h$[title=item$$$]{Header $}*3
<h1 title="item001">Header 1</li>
<h2 title="item002">Header 2</li>
<h3 title="item003">Header 3</li>
ul>li.item$3-5
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
|
#header
<div id="header"></div>
.title
<div class="title"></div>
form#search.wide
<form id="search" class="wide"></form>
p.class1.class2
<p class="class1 class2"></p>
|
|
Implicit tag names
|
|
|
.class
<div class="class"></div>
ul>.class
<ul>
<li class="class"></li>
</ul>
|
em>.class
<em><span class="class"></span></em>
table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
|
|
Grouping: ()
|
Lorem Ipsum generator: lorem
|
|
div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
(div>dl>(dt+dd)*2)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
|
ul.generic-list>lorem5.item*4
<ul class="generic-list">
<li class="item">Lorem ipsum instructior quaestio suspendisse.</li>
<li class="item">Accusam putant quam everti fuisset.</li>
<li class="item">Novum fames; Voluptua mandamus amet.</li>
<li class="item">Ultrices iudico euismod sententiae conubia.</li>
</ul>
p>lorem20
<p>Lorem ipsum tale libris! Ius! Rationibus habeo? Splendide volutpat senserit. Reprimique antiopam duis reprehendunt ancillae sem expetenda eum? Singulis? Epicuri.</p>
p*3>lorem5 or (p>lorem5)*3
<p>Lorem ipsum tale libris! Ius!</p>
<p>Dissentiet esse alienum; Nominati liberavisse.</p>
<p>Condimentum ludus argumentum dignissim montes.</p>
lorem20
Lorem ipsum sea persecuti eum dis labores es neque. Sententiae his oratio nonummy habitasse causae sadipscing reformidans senectus magnis vehicula.
|
Note that the Lorem Ipsum generator can use both standard Emmet abbreviations and a RJ Emmet flavor. E.g. p*4>lorem80 can be written as p{@lorem80}*4. The Lorem Ipsum abbreviation variable "@lorem" is put inside text braces {}, just as plain text.
Filters
Filters can be used to modify the output. Each filter must start with a |-pipe and be added at the end of the abbreviation. It's possible to add several filters. E.g. #content>p.title|e|s
c
Comment important tags. Important tags are those containing class or id attributes. The comment is placed at a new line after the closing tag.
e
Escape XML-unsafe characters: <, > and &.
Ex.
<p>|e result in the following output:
<p></p>
s
Single line. Expand everything to a single line of code.
t
Trim line markers from wrapped lines e.g. "* ", "- " or "1."
Ex.
Selected text
* Line 1
* Line 2
ul>li*|t gives the output:
<ul>
<li>Line 1</li>
<li>Line 2</li>
</ul>
w or w<x>
Wordwrap selected or lorem generated text. Default width is 80. To wrap at a different column just add the column. E.g. |w120 will wrap at column 120.
Wrap with Abbreviation
This is a very useful feature of Emmet and lets you enter an abbreviation, expands it and place currently selected content in the last element of generated snippet.
You can also use placeholders $# to control where selected text should be inserted.
When wrapping lists - the trim filter "|t", at the end of the abbreviation, can be used to strip all list markers like * or numbers.
Wrapping individual lines
This feature is very useful when you need to wrap text in tags. For example lists. Below are a few examples.
Selected text
Information
Content
News
About
ul>li* gives the following output:
<ul>
<li>Information</li>
<li>Content</li>
<li>News</li>
<li>About</li>
</ul>
Selected lines are wrapped inside HTML tags.
Selected text
1. Information
2. Content
3. News
4. About
nav>ul.nav>li.nav-item$*>a|t gives the following output:
<nav>
<ul class="nav">
<li class="nav-item1"><a href="">Information</a></li>
<li class="nav-item2"><a href="">Content</a></li>
<li class="nav-item3"><a href="">News</a></li>
<li class="nav-item4"><a href="">About</a></li>
</ul>
</nav>
Control output with placeholders $#
Emmet insert selected text inside the latest element. If you want more control over where the selected text is inserted you can use placeholders $#.
Selected text
Information
Content
News
About
ul>li[title=$#]*>{$#}+img[alt=$#] gives the output:
<ul>
<li title="Information">Information<img src="" alt="Information" /></li>
<li title="Content">Content<img src="" alt="Content" /></li>
<li title="News">News<img src="" alt="News" /></li>
<li title="About">About<img src="" alt="About" /></li>
</ul>
CSS
It's possible to use vendor prefix with abbreviations. E.g. -moz-ac will expand into -moz-align-content: |;
You can also use the macro prefixes -, -v-, -m-, -w- to expand into several lines with predefined vendor prefixes. Note that multi cursors are used to edit each line.
-bb or -v-bb
-webkit-border-bottom: |;
-moz-border-bottom: |;
border-bottom: |;
-w-bb
-webkit-border-bottom: |;
border-bottom: |;
-m-bb
-moz-border-bottom: |;
border-bottom: |;
Markdown
It's possible to use abbreviations in markdown documents. Supported abbreviations are:
a link
b bold
bq blockquote
code inline code snippet
h1..h6 heading
hr horizontal rule
i italic
img image
ol ordered list
pre code block with language based highlighting
strike strike through
table table
ul unordered list
@l or @l80 create lorem generated text
|
