Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 46 commits ahead, 2 commits behind scymtym:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

About Zencoding

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:

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.

Screenshots and videos


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.


Basic tags

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">
.x                       <div class="x">
#q.x                     <div id="q" class="x">
#q.x.y.z                 <div id="q" class="x y z">

Empty tags

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"/>

Self-closing tags

input type=text          <input type="text"/>
img                      <img/>
img>metadata/*2          <img>


a+b                      <a></a>
a+b+c                    <a></a>
a.x+b                    <a class="x"></a>
a#q.x+b                  <a id="q" class="x"></a>
a#q.x.y.z+b              <a id="q" class="x y z"></a>
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>

Tag expansion

table+                   <table>
dl+                      <dl>
ul+                      <ul>
ul++ol+                  <ul>
ul#q.x.y m=l+            <ul id="q" class="x y" m="l">

Parent > child

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">
a>b+c                    <a>
a>b+c>d                  <a>


a*1                      <a></a>
a*2                      <a></a>
a/*2                     <a/>
a*2+b*2                  <a></a>
a*2>b*2                  <a>
a>b*2                    <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#q.x>b/#q.x*2           <a id="q" class="x">
                             <b id="q" class="x"/>
                             <b id="q" class="x"/>


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> x=y m=l            <a class="foo" x="y" m="l"></a> x=y m=l     <a id="foo" class="bar mu" x="y" m="l"></a>
a/ x=y m=l    <a id="foo" class="bar mu" x="y" m="l"/>
a x=y+b                  <a x="y"></a>
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)+(b)                  <a></a>
a>(b)                    <a><b></b></a>
(a>b)>c                  <a><b></b></a>
(a>b)+c                  <a><b></b></a>
z+(a>b)+c+k              <z></z>
(a)*2                    <a></a>
((a)*2)                  <a></a>
((a))*2                  <a></a>
(a>b)*2                  <a><b></b></a>
(a+b)*2                  <a></a>

Filter: HTML with comments

a.b|c                    <!-- .b -->
                         <a class="b"></a>
                         <!-- /.b -->
#a>.b|c                  <!-- #a -->
                         <div id="a">
                             <!-- .b -->
                             <div class="b">
                             <!-- /.b -->
                         <!-- /#a -->

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>a href=#+br|haml       %p
                             %a{:href => "#"}

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 "#"}]
#q>(a*2>b)+p>b|hic       [:div#q
                             [:a [:b]]
                             [:a [:b]]

Filter: escape

script src=&quot;|e      &lt;script src="&amp;quot;"&gt;


a neat way to write markup quickly in emacs






No releases published


No packages published


  • Emacs Lisp 100.0%