HTML-Strukturen im Handumdrehen: Zen-Coding

Zen-Coding ist für HTML-Schreiber eine schöne Sache. Will man komplexe Konstrukte wie Tabellen mit der Hand schreiben, sind da einige Tastendrücke notwendig. Zen-Coding kürzt die Sache ab. Man schreibt:

table.overview#mainoverview>thead(>tr>th*4)+tbody>tr>td*4

Nun drückt man (bei den meisten Implementierungen) Strg+e und die Eingabe wird automatisch erweitert:

<table class="overview" id="mainoverview">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Installation in Sublime Text 2

cd ~/.config/sublime-text-2/Packages/
git clone --depth 1 https://github.com/sergeche/emmet-sublime.git

Sublime neustarten und fertig.

Installation in WordPress

Auch in WordPress lässt sich Zen-Coding verwenden, wie ich im Artikel HTML-Editor in WordPress mit Zen-Coding verbessern schon einmal beschrieben habe.