__This is a fork of [zencoding-mode](https://github.com/rooney/zencoding) to support [Emmet](https://emmet.io/)'s feature set.__
## Abbreviation Examples
- [HTML abbreviations](#html-abbreviations)
- [CSS abbreviations](#css-abbreviations)
## Emmet Actions
- [Go to Edit Point](#go-to-edit-point)
## Supported Emacs
`emmet-mode` is supported by GNU Emacs versions from 23 onward.
## Installation
### 1. Manual Installation
Just make sure emmet-mode.el is in your `load-path`.
### 2. Settings to use.
If you manually installed emmet-mode to `~/emacs.d/emmet-mode/`, add the following lines to your init.el or .emacs:
(add-to-list 'load-path "~/emacs.d/emmet-mode")
(require 'emmet-mode)
If you installed from marmalade/MELPA then these you shouldn't need to do this.
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.
By default, inserted markup will be indented with indent-region, according to the buffer's mode. To disable this, do:
(add-hook 'emmet-mode-hook (lambda () (setq emmet-indent-after-insert nil)))
If you disable indent-region, you can set the default indent level thusly:
(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 expanding:
(setq emmet-move-cursor-after-expanding nil) ;; default t
If you want to use emmet with react-js's JSX, you probably want emmet to expand 'className="..."' instead of 'class="..."':
(setq emmet-expand-jsx-className? t) ;; default nil
If you want to customize Self-closing tags style:
(setq emmet-self-closing-tag-style " /") ;; default "/"
;; only " /", "/" and "" are valid.
;; eg. , ,
## 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
#### Lorem-Ipsum generator
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>lorem3
Pellentesque elit eget?
Sed odio morbi?
Eget arcu dictum!
ul.list>ipsum3*3
Nam libero justo.
Pellentesque habitant morbi?
Enim blandit volutpat.
ul.list>ipsum3.itm*3
Urna condimentum mattis.
Sed turpis tincidunt.
Faucibus turpis in?
ul.list>(li.itm>lorem3)*3
Est pellentesque elit.
In nulla posuere.
Felis eget nunc.
#### 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](https://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](https://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](https://docs.emmet.io/css-abbreviations/).
## Actions
### Go to Edit Point
Traverse between important code points in HTML.
- `` is "Previous Edit Point" (`M-x emmet-prev-edit-point`)
- `` is "Next Edit Point" (`M-x emmet-next-edit-point`)
For further information and demo see [Emmet's documentation](https://docs.emmet.io/actions/go-to-edit-point/).
## Development Notes
When working on emmet-mode. It is generated from the files in the `/src` directory by `make`.
$ make clean && make
Require `pandoc` for generate README.txt
# pacman -S pandoc
then run:
$ make docs