Zen Coding

Zen Coding Набор инструментов для скоростной и удобной верстки Сергей Чикуёнок

Что такое Zen Coding Набор инструментов для работы с кодом Написан на чистом JavaScript, портирван на Python Поддерживаемые редакторы: Eclipse/Aptana , Coda, TextMate, Espresso (включен в базовую сборку), Gedit , TopStyle http://code.google.com/p/zen-coding/

Разворачивание аббревиатур — ключевой компонент Zen Coding Zen Coding

Expand Abbreviation div#header>cc:ie6+ul.nav>li*3>a

Expand Abbreviation <div id="header">  <ul class="nav"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>

Синтаксис E#id.class div#header -> <div id=”header”></div> p.date -> <p class=”date”></p> div#head.one.two -> <div id=”head” class=”one two”></div>

Синтаксис E>E head>link -> table>tr>td -> ul#name>li.item -> <head> <link/></head> <link/></head> <table><tr><td></td></tr></table> <table><tr><td></td></tr></table> <table><tr><td></td></tr></table> <table><tr><td></td></tr></table> <table><tr><td></td></tr></table> <ul id="name"><li class="item"></li></ul> <ul id="name"><li class="item"></li></ul> <ul id="name"><li class="item"></li></ul>

Синтаксис E+E p+p -> div#name>p.one+p.two -> <p></p><p></p> <div id="name"> <p class="one"></p> <p class="two"></p></div>

Синтаксис E$*N p.name-$*3 -> select>option#item-$*3 -> <p class="name-1"></p><p class="name-2"></p><p class="name-3"></p> <select> <option id="item-1"></option> <option id="item-2"></option> <option id="item-3"></option></select>

Структурные элементы Тэги Сниппеты — произвольный код Все структурные элементы находятся в файле zen_settings.js (или zen_settings.py )

Структура zen_settings var zen_settings = { // описания языков ‘ css ’: { ... }, ‘ html ’: { ‘ extends ’: ‘css’, ‘ snippets ’: { ... }, ‘ abbreviations ’: { ... } } }

Описание языка: сниппеты ‘ snippets ’: { 'cc:ie6': '' }

Описание языка: аббревиатуры (тэги) ‘ abbreviations ’: { 'a:link': '<a href="http:// | "></a>', 'img': '<img src="" alt="" />' }

Новое в версии 0.5 Упрощенный синтаксис настроек Профили форматирования вывода Новый ключевой компонент — контекстно-независимый поиск пар тэгов (html pair matcher). Обёртывание аббревиатурами

Сниппеты принимают атрибуты ID и CLASS: ‘ snippets ’: { 'djb': '{% block ${id} %}\n\t ${child} | \n{% endblock %}' } djb#content>div.page -> {% block content %} <div class="page"></div>{% endblock %}

Профили форматирования Eclipse/Aptana: профиль определяется в зависимости от текущего редактора (HTML/XML) и доктайпа.

Профили форматирования div>img+br

Профили форматирования HTML <div><img src="" alt=""><br></div>

Профили форматирования XHTML <div><img src="" alt="" /><br /></div>

Профили форматирования XML <div> <img src="" alt=""/> <br/> </div>

Поиск пар тэгов <p><em>Hello world</em></p> <p><em>Hello world</em></p>

Поиск пар тэгов Работает везде, где есть тэги: <?php $str = '<table>'; $str .= '<tr>'; for ($i = 0; $i < 4; $i++) { $str .= '<td>'.$i.'</td>'; } $str .= '</tr>'; $str .= '</table>'; ?>

Wrap with abbreviation <ul id="nav"> <li></li> </ul> + div#header>h1+div.wrap

Wrap with abbreviation <div id="header"> <h1></h1> <div class="wrap"> <ul id="nav"> <li></li> </ul> </div> </div>

Wrap with abbreviation item 1 item 2 item 3 + div#header>ul#nav>li.item-$ *

Wrap with abbreviation <div id="header"> <ul id="nav"> <li class="item-1"> item 1 </li> <li class="item-2"> item 2 </li> <li class="item-3"> item 3 </li> </ul> </div>

Онлайн демонстрация http://www.zen-coding.ru/demo/ плагин к editArea

Как работает Zen Coding Zen Coding

Архитектура Редактор Прослойка Zen Coding HTML Pair Matcher API текст текст текст

Парсинг аббревиатур Поиск аббревиатуры в текстовом потоке Валидация аббревиатуры Разбор аббревиатуры в дерево Форматирование и вывод кода

Поиск аббревиатуры Hello world! div#header+ul>li Посимвольный перебор влево: function isAllowedChar ( ch ) { var char_code = ch . charCodeAt ( 0 ), special_chars = '#.>+*:$-_!@' ; return ( char_code > 64 && char_code < 91 ) // uppercase letter || ( char_code > 96 && char_code < 123 ) // lowercase letter || ( char_code > 47 && char_code < 58 ) // number || special_chars . indexOf ( ch ) != -1 ; // special character } перебор символов

Поиск аббревиатуры Проблема: <div>ul#nav>li</div> < div>ul#nav>li </div> или <div> ul#nav>li </div> ? При нахождении символа > проверяем его принадлежность тэгу — поиск влево до символа < , проверка по регулярному выражению, сравнение индексов.

Валидация аббревиатуры Валидация совмещена с разбором в дерево: function parseIntoTree ( abbr ) { ... var re = /([\+>])?([a-z@\!][a-z0-9:\-]*)(#[\w\-\$]+)?((?:\.[\w\-\$]+)*)(?:\*(\d+))?/ig abbr = abbr . replace ( re , function ( str , operator , tag_name , id , class_name , multiplier ) { ... return '' ; }); return (! abbr ) ? tree : null ; }

Разбор в дерево div+ul#nav>li*3>a Все узлы дерева являются объектами классов Tag() и Snippet() . root div ul (id=”nav”) li (×3) a ( href=”” )

Форматирование и вывод и вывод root.toString(profile_name); Все узлы форматируются и выводятся согласно настройкам профиля и типам тэгов (блочный, инлайн, пустой).

Поиск HTML-пар Поиск первого незакрытого тэга слева Поиск первого неоткрытого тэга справа Сохранение найденного результата в свойство last_match Выбор диапазона в зависимости от позиции картетки (включаем только содержимое тэга или весь тэг) <p> Lorem <span> ipsum </span> dolor <span> sit </span> amet. </p>

Поиск HTML-пар HTMLPairMatcher . last_match = { opening_tag : { name : 'ul' , full_tag : '<ul id="nav">' , start : 5 , end : 19 , unary : false , type : 'tag' , close_self : false }, closing_tag : { ... } }

Поддержка редакторов У всех редакторов разный API У некоторых редакторов (TextMate, Coda) односторонняя связь Разворачивание аббревиатур по клавише Tab требует низкоуровневой поддержки редактора

EclipseMonkey Позволяет писать плагины для Eclipse на JavaScript Использует движок Mozilla Rhino можно использовать Java-классы внутри JavaScript позволяет обратиться к любому компоненту IDE немного отличается от того, что используется в браузерах нужно следить за типом объектов: String и java.lang.String — разные классы с разными характеристиками

Вопросы? [email_address] http://chikuyonok.ru http://chikuyonok.ru http://chikuyonok.ru

Zen Coding

More Related Content

What's hot (7)

Viewers also liked (19)

Similar to Zen Coding (20)

More from 404fest (20)

Zen Coding