A quoi ça sert ?

Zen Coding est un plugin disponible pour un grand nombre d’éditeurs de code et permet d’accélérer grandement l’écriture de code HTML en convertissant une ligne de texte, dont la syntaxe est proche de code CSS, en markup HTML.

Pour comprendre le fonctionnement de Zen Coding considérons l’exemple suivant :

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

Cette simple ligne sera convertie automatiquement en code HTML :

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

Redoutable non ?
En décomposant le fonctionnement, la ligne indique au plugin de :

• créer une div avec l’id #page (div#page) contenant (>)
• une div de classe .logo (div.logo) suivie (+)
• d’une liste non ordonnée d’id #navigation (ul#navigation) contenant (>)
• 5 objets de liste (li*5) qui contiennent (>)
• un lien (a)… ouf, rien que ça en une seule ligne !

Les possibilités du plugin

Actuellement Zen Coding propose les possibilités suivantes :

• Ajout d’attributs d’id et de class (#id.class) – les classes pouvant être chainées pour en appliquer plusieurs d’un coup.
• Ajout d’attributs sur mesure : div[title], a[title="Hello world" rel], td[colspan=2].
• La multiplication d’éléments : li*5 sera converti en 5 éléments <li>.
• La numérotation d’éléments : li.item$*3 deviendra 3 éléments <li class= »itemX »> où X est le numéro (en partant de 1) de l’élément.
• Plusieurs ‘$’ seront remplacés par des zéros : li.item$$$ deviendra <li class « item001″>.
• Des groupages qui potentiellement pourraient permettre d’écrire une page entière en une seule ligne : div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer.
• Le support de filtres (voir la documentation)

Télécharger Zen Coding

Le plugin est disponible pour plusieurs éditeurs différents et téléchargeable gratuitement ici : Zen Coding. Vous y trouverez également la documentation — relativement courte puisque le plugin est très simple.