Zen Coding is powerful abbreviation engine which allows you to expand expressions into HTML code. The hint of zen coding is using css selectors to generate code which is pretty cool like access the dom elements.

For example

1

div#page>div.logo+ul#navigation>li*5>a

can be expanded into:

1
2
3
4
5
6
7
8
9
10

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

Useful Links over Zen Coding

1. Homepage : https://github.com/sergeche/zen-coding
2. Download Link : http://github.com/mikecrittenden/zen-coding-gedit
3. Demo Videos : http://vimeo.com/7405114
4. Examples : http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
5. Features : http://code.google.com/p/zen-coding/wiki/Actions

Install Zen Coding at gedit

1. Download http://github.com/mikecrittenden/zen-coding-gedit/zipball/master source and unpack it.
2. Move `zencoding.gedit-plugin` and the `zencoding` folder into `~/.gnome2/gedit/plugins/`
3. In Gedit, go to Edit → Preferences → Plugins to enable the plugin.
4. Try it out using the shortcut keys listed below.

Shortcuts

• Expand abbreviation with Ctrl+E
• Expand abbreviation as you type with Ctrl+Alt+E
• Wrap with abbreviation with Ctrl+Shift+E
• Balance tag inward or outward with Ctrl+Alt+I or Ctrl+Alt+O
• Merge lines with Ctrl+Alt+M
• Go to previous or next edit point with Alt+Left and Alt+Right
• Remove tag with Ctrl+Alt+R
• Split or join tags with Ctrl+Alt+J
• Toggle comment with Ctrl+Alt+C

Best Regards.