__This is a fork of [zencoding-mode](https://github.com/rooney/zencoding) to support [Emmet](http://emmet.io/)'s feature.__
## About zencoding-mode
[zencoding-mode](https://github.com/rooney/zencoding) is a minor mode providing support for Zen Coding by producing HTML from CSS-like selectors. See [README](https://github.com/rooney/zencoding/blob/master/README.md)
## About Emmet
Zen Coding has been renamed to [Emmet](http://emmet.io/) and includes an expanded feature set.
## Abbreviation Examples
- [HTML abbreviations](https://github.com/smihica/emmet#html-abbreviations)
- [CSS abbreviations](https://github.com/smihica/emmet#css-abbreviations)
## Installation
### 1. From marmalade
If your emacs has been installed marmalade then type `M-x package-list-packages` search `emmet-mode X.X.X` and install it.
### 1. Manual instalation
Just make sure emmet-mode.el is in your `load-path`.
### 2. Settings to use.
Open your .emacs or init.el and if you extracted emmet-mode to a directory
(if you installed from marmalade then this setting is needless)
(add-to-list 'load-path "~/emacs.d/emmet-mode")
And then just require as normal:
(require 'emmet-mode)
Enable it by running `M-x emmet-mode`.
### 3. Optional settings
You probably want to add it to auto-load on your sgml modes:
(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.
You can set default indent depth of HTML abbreviation:
(add-hook 'emmet-mode-hook (lambda () (setq emmet-indentation 2))) ;; indent 2 spaces.
If you want the cursor to be positioned between first empty quotes after expanding:
(setq emmet-move-cursor-between-quotes t) ;; default nil
Or if you don't want to move cursor after expandin:
(setq emmet-move-cursor-after-expanding nil) ;; default t
## Usage
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'll transform your snippet into the appropriate tag structure.
## HTML abbreviations
#### Basic tags
a
a.x
a#q.x
a#q.x.y.z
#q
#### Properties
b x
b x=
b x=""
b x=y
b x="y"
b x="()"
b x m
b x= m=""
b x=y m=l
b/ x=y m=l
b#foo x=y m=l
b.foo x=y m=l
b#foo.bar.mu x=y m=l
b/#foo.bar.mu x=y m=l
b x=y+b
b x=y+b x=y
b x=y>b
b x=y>b x=y
b x=y>b x=y+c x=y
#### Parentheses
(a)
(a)+(b)
a>(b)
(a>b)>c
(a>b)+c
z+(a>b)+c+k
(x)*2
((x)*2)
((x))*2
(x>b)*2
(x+b)*2
#### Text
a{Click me} Click me
a>{Click me}*2
Click me
Click me
x{click}+b{here} clickhere
span>{click}+b{here}
click
here
p>{Click}+span{here}+{ to continue}
Click
here
to continue
p{Click}+span{here}+{ to continue}
Click
here
to continue
#### Filter: HTML with comments
a.b|c
#a>.b|c
#### Filter: HAML
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 => "y", :m => "l"}
div|haml %div
div.footer|haml .footer
.footer|haml .footer
p>{txt}+a href=#+br|haml %p
txt
%a{:href => "#"}
%br
#### Filter: Hiccup
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 "y", :m "l"}]
.footer|hic [:div.footer]
p>a href=#+br|hic [:p
[:a {:href "#"}]
[:br]]
#q>(a*2>b{x})+p>b|hic [:div#q
[:a [:b "x"]]
[:a [:b "x"]]
[:p
[:b]]]
#### Filter: escape
script src="|e <script src=""">
</script>
#### Aliases
html:5
Document
html:xt
Document
meta:vp
* See HTML section of [cheat-sheet](http://docs.emmet.io/cheat-sheet/) to find more aliases.
## CSS abbreviations
#### Basic Usage
p1-2!+m10e+bd1#2s padding: 1px 2px !important;
margin: 10em;
border: 1px #222 solid;
#### Keywords
m margin: ;
bg+ background: #fff url() 0 0 no-repeat;
c color: #000;
* See CSS section of [cheat-sheet](http://docs.emmet.io/cheat-sheet/) to find more keywords.
#### Values
separate each value by '-' or ' ';
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;
#### Multiple property definition
concatenate each property by '+';
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;
#### Value units
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;
* Unit-aliases
e em
p %
x ex
r rem
#### Unitless property
lh2 line-height: 2;
fw400 font-weight: 400;
#### Color abbreviations
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;
* Color expansion
#1 #111
#e0 #e0e0e0
#fc0 #fc0
#### Important
c#3!+bdrs2! color: #333 !important;
border-radius: 2px !important;
* If you want further information, see [Emmet's documentation](http://docs.emmet.io/css-abbreviations/).