Если вы активно занимаетесь версткой веб-сайтов, то наверняка сами знаете, что такое Zen Coding. В двух словах, Zen Coding — это набор плагинов (а в конечном счете набор сниппетов) для текстовых редакторов, который во много раз ускоряет написание html и css кода. Все подробности вы можете узнать на официальном сайте проекта, сейчас же я хочу рассказать, как можно подключить возможность использовать Zen Coding в любых текстовых полях на сайтах и в некоторых популярных редакторах.
С некоторых пор «Zen Coding» сменил свое название на «Emmet» (об этом чуть подробнее в конце статьи).
Zen Coding на любом вебсайте
Если вы, как и я, используете в качестве основного браузера Firefox, то вы можете использовать Zen Coding в любом текстовом поле на любом сайте. Первым делом для этого нужно установить расширение Greasemonkey, позволяющее использовать пользовательский JavaScript на сайтах. После этого в качестве одного из пользовательских скриптов необходимо установить «Zen Coding for any website». Вуаля — теперь рядом с любым текстовым полем появляется волшебная кнопочка 
, нажав на которую можно увидеть используемые горячие клавиши:
В настройках скрипта можно создавать списки сайтов, на которых скрипт будет работать (или наоборот, не работать). По умолчанию скрипт работает на всех сайтах во всех текстовых формах.
Этому скрипту можно найти множество применений. Например, в CMS Joomla нет встроенной возможности использовать Zen Coding, также нет и сторонних редакторов с реализацией Zen Coding. Однако при использовании вышеописанного скрипта достаточно отключить встроенный WYSIWYG-редактор. В этом случае для редактирования контента будет использоваться обычное текстовое поле, в котором появится возможность использовать всю мощь Zen Coding.
Zen Coding в Geany
Geany — прекрасный текстовый редактор. Простой и легкий, но достаточно мощный, именно его я долгое время использовал в качестве основного.
В Geany нет поддержки Zen Coding из коробки, однако ее легко реализовать установкой соответствующего плагина:
sudo add-apt-repository ppa:chalisesagar/geany-extras sudo apt-get update sudo apt-get install geany-zencoding
После установки необходимо включить плагин в настройках (в меню «Tools → Plugin Manager»). После этого в меню появится группа пунктов «Tools → Zen Coding», в которой можно подсмотреть используемые горячие клавиши.
Zen Coding в Komodo Edit
Про установку редактора Komodo Edit в Ubuntu и добавление в него поддержки Zen Coding я уже писал отдельную статью. Повторю здесь вкратце то, что касается Zen Coding.
Для добавления поддержки Zen Coding в Komodo Edit достаточно перейти на пункт меню «Tools → Add-ons», после чего найти и установить расширение «Zen Coding». Установка на этом завершена, но горячие клавиши для работы придется настроить вручную. Подробности об этом — опять же, в соответствующей статье.
Zen Coding в Sublime Text 2
Наконец, на закуску я оставил подробности об установке поддержки Zen Coding в мой любимый текстовый редактор — Sublime Text 2. В будущих статьях я напишу гораздо больше подробностей о редакторе, а сейчас — про Zen Coding.
Для комфортной установки пакетов в «Sublime Text 2» у вас должен быть установлен пакет «Sublime Package Control». Для его установки достаточно скопировать в папку «Installed Packages» в профиле программы установочный пакет.
После этого запускаем «Package Control» (Ctrl+Shift+P), переходим к пункту «Package Control: Install Package» (для этого достаточно набрать слово Install в поле поиска), и устанавливаем пакет «Zen Coding». Вуаля, все готово.
Emmet — дальнейшее развитие концепции Zen Coding
Возможно, не все поклонники Zen Coding знают, что проект сменил название и новые версии его называются Emmet. Благодаря нововведениям скорость работы с кодом повысилась еще больше (оказывается, это возможно).
Плагинописатели не успевают за изменениями, и Emmet-плагин есть еще не для всех текстовых редакторов. К тому же, Emmet на сегодняшний день находится в активной разработке, и плагины с его поддержкой могут быть не лишены багов. На сегодняшний день вы можете спокойно продолжать использовать Zen Coding и перейти на Emmet в любой момент.
Впрочем, в моем любимом редакторе «Sublime Text 2» плагин «Emmet» уже имеется (устанавливается через «Package Control»), и его уже вполне можно использовать в реальной работе, что я и делаю.
Я так понимаю в качестве подручного редактора вместо штатного gedit?
Да, именно так. Да и сейчас я его продолжаю использовать в качестве легкого просмотрщика файлов по «F3» в Double Commander (файловом менеджере). А в качестве основного редактора («F4» там же) использую Sublime.