Пишем HTML-код быстрее

zen-coding

Zen Coding — плагин для редакторов кода, который позволяет быстро создавать HTML, XML, XSL разметку. Принцип работы основан на использовании аббревиатур для обозначения HTML-тегов, их аттрибутов, а также их вложенности.




Начнем с простого. Пишем в редакторе:

span#date

нажимаем Ctrl-E (комбинация клавиш зависит от редактора) и получаем:

<span id="date"></span>

Вложенность символизирует символ ">". Также есть возможность указать число элементов:

ol>li*5

=

<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

Пример посложнее. Типичный код HTML-документа:

<div id="header">
<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 это делается так:

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

Также плагин поддерживает группировку элементов с помощью круглых скобок:

div#wrap>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

=

<div id="wrap">
<div id="header">
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div id="page">
<h1><span></span></h1>
<p></p>
<p></p>
</div>
<div id="footer"></div>
</div>

В общем, вся разметка HTML-страницы может быть написана одной строкой.

На данный момент плагин Zen Coding доступен для большинства распостраненных редакторов кода.

Сайт проекта

Вы подписались на нашу рассылку
Спасибо!
Мы обещаем, что не будем спамить, все только самое
нужное и полезное для вашего развития.