Description here and here.
I’ll quote the blog:
zen-coding includes an entirely new angle to writing markup, and it facilitates the feature by letting you write HTML based on CSS selectors. It’s so simple it’s confusing at first. I think it’s best explained by doing a quick before and after. If you were to type:
div#name.one.two
and follow that with the zen-coding plugin keystroke (CMD+E in TextMate), the plugin will reformat the line as:
<div id="name" class="one two"></div>
See the EmacsWiki for more background on this mode.
Just make sure zencoding-mode.el is in your load-path, if you
extracted zencoding-mode to a directory:
(add-to-list "~/emacs.d/zencoding-mode")
And then just require as normal:
(require 'zencoding-mode)
Enable it by running M-x zencoding-mode. You probably want to add it
to auto-load on your sgml modes:
(add-hook 'sgml-mode-hook 'zencoding-mode) ;; Auto-start on any markup modes
Good to go: place point in a zencoding snippet and press C-j to expand it (or alternatively, alias your preferred keystroke to M-x zencoding-expand-line) and you'll transform your snippet into the appropriate tag structure.
a <a></a>
a.x <a class="x"></a>
a#q.x <a id="q" class="x"></a>
a#q.x.y.z <a id="q" class="x y z"></a>
#q <div id="q">
</div>
.x <div class="x">
</div>
#q.x <div id="q" class="x">
</div>
#q.x.y.z <div id="q" class="x y z">
</div>
a/ <a/>
a/.x <a class="x"/>
a/#q.x <a id="q" class="x"/>
a/#q.x.y.z <a id="q" class="x y z"/>
input type=text <input type="text"/>
img <img/>
img>metadata/*2 <img>
<metadata/>
<metadata/>
</img>
a+b <a></a>
<b></b>
a+b+c <a></a>
<b></b>
<c></c>
a.x+b <a class="x"></a>
<b></b>
a#q.x+b <a id="q" class="x"></a>
<b></b>
a#q.x.y.z+b <a id="q" class="x y z"></a>
<b></b>
a#q.x.y.z+b#p.l.m.n <a id="q" class="x y z"></a>
<b id="p" class="l m n"></b>
table+ <table>
<tr>
<td>
</td>
</tr>
</table>
dl+ <dl>
<dt></dt>
<dd></dd>
</dl>
ul+ <ul>
<li></li>
</ul>
ul++ol+ <ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
ul#q.x.y m=l+ <ul id="q" class="x y" m="l">
<li></li>
</ul>
a>b <a><b></b></a>
a>b>c <a><b><c></c></b></a>
a.x>b <a class="x"><b></b></a>
a#q.x>b <a id="q" class="x"><b></b></a>
a#q.x.y.z>b <a id="q" class="x y z"><b></b></a>
a#q.x.y.z>b#p.l.m.n <a id="q" class="x y z"><b id="p" class="l m n"></b></a>
#q>.x <div id="q">
<div class="x">
</div>
</div>
a>b+c <a>
<b></b>
<c></c>
</a>
a>b+c>d <a>
<b></b>
<c><d></d></c>
</a>
a*1 <a></a>
a*2 <a></a>
<a></a>
a/*2 <a/>
<a/>
a*2+b*2 <a></a>
<a></a>
<b></b>
<b></b>
a*2>b*2 <a>
<b></b>
<b></b>
</a>
<a>
<b></b>
<b></b>
</a>
a>b*2 <a>
<b></b>
<b></b>
</a>
a#q.x>b#q.x*2 <a id="q" class="x">
<b id="q" class="x"></b>
<b id="q" class="x"></b>
</a>
a#q.x>b/#q.x*2 <a id="q" class="x">
<b id="q" class="x"/>
<b id="q" class="x"/>
</a>
a x <a x=""></a>
a x= <a x=""></a>
a x="" <a x=""></a>
a x=y <a x="y"></a>
a x="y" <a x="y"></a>
a x="()" <a x="()"></a>
a x m <a x="" m=""></a>
a x= m="" <a x="" m=""></a>
a x=y m=l <a x="y" m="l"></a>
a/ x=y m=l <a x="y" m="l"/>
a#foo x=y m=l <a id="foo" x="y" m="l"></a>
a.foo x=y m=l <a class="foo" x="y" m="l"></a>
a#foo.bar.mu x=y m=l <a id="foo" class="bar mu" x="y" m="l"></a>
a/#foo.bar.mu x=y m=l <a id="foo" class="bar mu" x="y" m="l"/>
a x=y+b <a x="y"></a>
<b></b>
a x=y+b x=y <a x="y"></a>
<b x="y"></b>
a x=y>b <a x="y"><b></b></a>
a x=y>b x=y <a x="y"><b x="y"></b></a>
a x=y>b x=y+c x=y <a x="y">
<b x="y"></b>
<c x="y"></c>
</a>
(a) <a></a>
(a)+(b) <a></a>
<b></b>
a>(b) <a><b></b></a>
(a>b)>c <a><b></b></a>
(a>b)+c <a><b></b></a>
<c></c>
z+(a>b)+c+k <z></z>
<a><b></b></a>
<c></c>
<k></k>
(a)*2 <a></a>
<a></a>
((a)*2) <a></a>
<a></a>
((a))*2 <a></a>
<a></a>
(a>b)*2 <a><b></b></a>
<a><b></b></a>
(a+b)*2 <a></a>
<b></b>
<a></a>
<b></b>
a.b|c <!-- .b -->
<a class="b"></a>
<!-- /.b -->
#a>.b|c <!-- #a -->
<div id="a">
<!-- .b -->
<div class="b">
</div>
<!-- /.b -->
</div>
<!-- /#a -->
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>a href=#+br|haml %p
%a{:href => "#"}
%br
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)+p>b|hic [:div#q
[:a [:b]]
[:a [:b]]
[:p
[:b]]]
script src="|e <script src="&quot;">
</script>