Zen Coding

Dec 16, 2010   //   by admin   //   General  //  No Comments

I just wanted to share a handy dandy tool with you all. It’s called “Zen Coding“, and the plugin (for Visual Studio) can be found here.  Zen Coding is an editor plugin for high-speed HTML, XML, and XSL (or any other structured code format) coding and editing.

So, what will it do for me?  Well, suppose you want to write some HTML.  You know that the page will have one of the new HTML5 header elements.  The header element will contain a child div called “logo”.  The “logo” div will contain an unordered list called “nav”, and will contain 5 list items.  Each list item will have a class, named after the index of the list item, and each list item will contain a link.  Rather than write all this HTML out by hand, you can lean on the plugin and instead write:

html:5>header>div#logo+ul#nav>li.item-$*5>a

and the plugin will produce the following html:

Zen Coding

Some useful links:

Zen Coding on Google Code

Zen Coding Demo

Zen Coding plugin for Visual Studio

Zen Coding Cheat Sheet

Leave a comment