Zen coding, write HTML and CSS faster

Last modified by mediacrea on Mon, November 22, 2010 02:46
Source|Old Revisions  |  Back To Group

Zen coding is a un plugin for IDE or text editor, it can speed up your code with a single line of css-like code

You just add a line :


and expand it with a shortcut key :

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

So you have a “css like” structure.

Zen coding support officialy some major editor :

  • aptana/eclipse/zend/
  • textmate
  • espresso
  • komodo edit
  • notepad++
  • Pspad

and some third party :

  • 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)
  • ntelliJ IDEA/WebStorm/PHPStorm (crossplatform)
  • Emacs (crossplatform)
  • Vim (crossplatform)
  • ReSharper plugin for Visual Studio

You can find more information about zen coding :


If you have an IDE based on eclipse :

In your IDE, go to : - help > Install new software - in the field “work with”, add http://zen-coding.ru/eclipse/updates/ - check “zen coding” - Confirm dialog box and accept conditions - relaunch your IDE

Now you have a new menu “zen coding” and your editor is ready. just type div.itworks and cmd+e (on mac)and your code will expand.


Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs