2010/06/11

Zen Coding para editar HTML+CSS

Zen Coding permite construir rápidamente bloques de código HTML y CSS a partir de secuencias mnemotecnicas.

Por ejemplo, html:4s puede expandirse para producir todo el esqueleto de una página HTM4 strict.

La siguiente secuencia:

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

Puede ser expandida para producir:

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

Zen Coding es un plugin disponible para Notepad++, Aptana y Dreamweaver, entre otros. Está disponible en Zen Coding.

Zen Coding con Notepad++

La versión para Notepad++ puede descargarse de http://code.google.com/p/zen-coding/downloads/list.

En mi caso, descargue Zen.Coding-Notepad++.v0.6.1.zip, cuyo contenido copié en el directorio plugins del árbol de Npp (C:\Program Files (x86)\Dev\Notepad++\plugins).
Zen Coding usa Npp Scripting, que permite extender Npp mediante javascript.
Luego de eso, la siguiente vez que se inicie Npp encontrará el menú Zen Coding.

El uso básico es sencillo. Puede escribir una secuencia y luego expandirla presionando CTRL+E.

1 comentario:

  1. Anónimo2:56 p.m.

    La verdad es que cuando le pillas el "truco" te das cuenta de la cantidad de tiempo que has perdido "tipeando" una y otra vez el mismo código. Zen Coding ha evolucionado a Emmet. Mantiene su filosofía y funcionamiento pero con algunas características que lo hacen todavía más potente. En su página han dejado un resumen del lenguaje y sus comandos que no tiene desperdicio.. http://docs.emmet.io/cheat-sheet/

    ResponderBorrar