Why not using an intuitive language to explain to other language what to do ?  This is the basic idea for the Emmet -(formerly « Zen Coding« ) tool ! Just write some simple hieroglyph like line bellow, and execute the « zen coding transformation »:

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

The you will get :

<div id="page">
         <div class="logo"></div>
         <ul id="navigation">
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
         </ul>
</div>

Cool tool, no ? have a try in your favorite code editor ! you can also discover Zen Coding power through the following video:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo. The best way to use it is to integrate this ZenCoding into the fabulous  Sublime Text editor. This is possible thanks to the ZenCoding plugin:

  1. Install the Package installer (if not alread done),
  2. [Ctrl+Shift+P] to open Package explorer, input « Install » and press [ENTER]
  3. input « ZenCoding » and press [ENTER]
  4. Wait…
  5. When done, restart Sublime Text.
  6. That’s all folks !
sublime_text_zencoding_before
Just input some zencode formated text …
sublime_text_zencoding_after
press TAB key and you will get the HTML version of your work !

Have Fun !

McG.

Publicités