O ZenCoding é um plugin para editores de texto com o fim de tornar a escrita do html mais rápida. Trata-se de uma forma de abreviar o código que se expande em um bloco pronto para você por o conteúdo.
Se você trabalha com html, certamente já está acostumado com vários padrões que sempre utiliza e, as vezes, faz um copy/paste de algum outro arquivo aberto para ganhar tempo, afinal escrever tags similares repetidamente não é a tarefa mais agradável do mundo.
Com o ZenCoding você só precisa escrever uma expressão, que será expandida para a estrutura desejada, por fim você também poderá criar suas próprias abreviações personalizadas.
Se você conhece bem html o entendimento da sintaxe deve ser trivial, então vamos aos exemplos :
A linha abaixo:
div#header>div.menu>ul>li.selected+li*5
Resulta em:
<div id="header"> <div class="menu"> <ul> <li class="selected"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div>
Muito legal, não é mesmo? Então vamos sofisticar um pouco mais:
div#leftmenu>img.logo+h1+(ul.menu$*3>li#item$*6)+p.copyright
Se transforma em:
<div id="leftmenu"> <img src="" alt="" class="logo" /> <h1></h1> <ul class="menu1"> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> <li id="item6"></li> </ul> <ul class="menu2"> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> <li id="item6"></li> </ul> <ul class="menu3"> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> <li id="item6"></li> </ul> <p class="copyright"></p> </div>
Mais exemplos com os fontes e detalhes de instalação podem ser encontrados no site oficial.
Edit: o Zen Coding foi renomeado como Emmet, e a página oficial do projeto possui os plugins e código fonte para download. O Emmet já vem instalado por padrão em alguns editores de texto, como o Visual Studio e VS Code.
O github do projeto também vale a visita.