| Input | Expands into |
|---|---|
| a | <a></a> |
| Use '.' to indicate the class of the element being created | |
| div.name | <div class="name"></div> |
| div.one.two | <div class="one two"></div> |
| Use '#' to indicate the id of the element being created | |
| div#name | <div id="name"></div> |
| Use '>' to indicate the next elements should be created as children | |
| head>link | <head><link></link></head> |
| table>tr>td | <table><tr><td></td></tr></table> |
| ul#name>li.item | <ul id="name"><li class="item"></li></ul> |
| Use '+' to indicate the next elments should be created as siblings | |
| p+p | <p></p><p></p> |
| ul.menu>li.one+li.two | <ul class="menu"><li class="one"></li><li class="two"></li></ul> |
| Use '*' to indicate an element should be created multiple times | |
| p*3 | <p></p><p></p><p></p> |
| ul#name>li.item*3 | <ul id="name"><li class="item"></li><li class="item"></li><li class="item"></li></ul> |
| Use '$' to output the index of the current element (when generating multiple elements with '*') | |
| p.name-$*3 | <p class="name-1"></p><p class="name-2"></p><p class="name-3"></p> |
| select>option#item-$*3 | <select><option id="item-1"></option><option id="item-2"></option><option id="item-3"></option></select> |
Click on an example at right, to see how a tiny input expands into a useful output.
zen-coding is a neat way to write markup very quickly.
zen-coding is a set of IDE plugins to perform hi-speed HTML and CSS coding
zen-coding was created by Sergey Chikuyonok.
It is available as a plugin that works with Aptana, TextMate, Coda, Netbeans, TopStyle, Web IDE, Sublime and Espresso. A separate implementation works with emacs.
This page uses the source code from the original Aptana plugin, slightly modified to work in a browser, rather than an IDE. Those modifications are available, under GPL
See also, article at secretGeek.net, and the World's Simplest Code Generator.