Zen Coding — a new way of writing HTML and CSS code
Follow us on Twitter @zen_coding
Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:
…can be expanded into:
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>
Abbreviation engine has a modular structure which allows you to expand abbreviations into different languages. Zen Coding currently supports CSS, HTML, XML/XSL and HAML languages via filters.
Current features of abbreviation engine
- ID and CLASS attributes:
- Custom attributes:
a[title="Hello world" rel],
- Element multiplication:
<li>tag five times.
- Item numbering with $ character:
<li>tag three times, replacing $ character with item number.
- Multiple ‘$’ characters in a row are used as zero padding, i.e.:
- Abbreviation groups with unlimited nesting:
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.
- Filters support
divtag name can be omitted when writing element starting from ID or CLASS:
#content>.sectionis the same as
Zen Coding isn’t only a decent abbreviation engine, it also provides some very useful actions for HTML-coder’s every day needs, like: Wrap with Abbreviation, Tag Balancing, Toggle Comment, Remove Tag etc. Read more about available actions.
Officially supported editors
These plugins are developed by Zen Coding team and guarantee to have full support of all Zen Coding latest features.
- Aptana/Eclipse (crossplatform) — Zen Coding for Eclipse
- TextMate (Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate). Bundles > Zen Coding menu item
- Coda (Mac) — external download, via TEA for Coda. Plug-ins > TEA for Coda > Zen Coding menu item
- Espresso (Mac) — external download external, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. Actions > HTML menu item
- Komodo Edit/IDE (crossplatform) — external download. Tools > Zen Coding menu item
- Notepad++ (Windows). Zen Coding menu item Also a Python version of NPP plugin is available.
- PSPad (Windows). Scripts > Zen Coding menu item
- e2 Editor (Windows). Bundles > Zen Coding menu item
<textarea>(browser-based). See online demo.
- CodeMirror (browser-based). See online demo.
Third-party supported editors
These plugins are using official Zen Coding engine and developed by third-party developers. Thus, no guarantee that they support all latest ZC features.
- Dreamweaver (Windows, Mac)
- Sublime Text (Windows)
- UltraEdit (Windows)
- TopStyle (Windows)
- GEdit (crossplatform) — Franck Marcia’s plugin, Mike Crittenden’s plugin
- BBEdit/TextWrangler (Mac) — external download
- Visual Studio (Windows) — external download
- EmEditor (Windows) — external download
- Sakura Editor (Windows) — external download
- NetBeans (crossplatform) — external download
- Chrome Extension — external download
These plugins are developed by third-party and has their own ZC engine implementation, which leads to different feature set and abbreviation syntax. Zen Coding team has no relation to this projects.
- IntelliJ IDEA/WebStorm/PHPStorm (crossplatform) — built-in in latest versions
- Emacs (crossplatform) — external download
- Vim (crossplatform) — Sparkup, Zen Coding for Vim
- ReSharper plugin for Visual Studio