Zen Coding isn't only a decent abbreviations expander, but also a set of handy tools for common XHTML tasks. Read this page carefully to boost your productivity even more. Note that almost every action highly depends on current caret position inside text editor.
This is a main tool of Zen Coding: when called, it search CSS-like abbreviation from your current caret position and expand it into HTML/XML/HAML code. If ZC can't find correct abbreviation, you can select it call “Expand Abbreviation” action again. Read more about available syntax on ZenHTMLSelectorsEn page.
Remember that it's not necessary to write abbreviation on a new line. When parsing, ZC search for a first stop-symbol (a space, for example) left to current caret position. Also, parser takes care about existing XHTML tags and it's smart enough to understand that in string “<div>ul#nav>li” you want to expand “ul#nav>li”, not “div>ul#nav>li”.
One of the most powerful tool for coder. It takes ZC abbreviation, expands it and places currently selected content in the last element of expanded abbreviation, taking care of proper code indentation. If you don't have selected text, it uses current caret position to create it. The algorithm is following (assuming we want to wrap text with “div.wrap” abbreviation):
When searching for content bounds, ZC will trim away whitespaces and newlines from the beginning and the end of actual content, thus giving you more predictable and desired result.
This action also introduces a special syntax for wrapping each line of selection. Placing asterisk near element (without multiplication number!) will mark it as a repeating element and output as many times as lines you have in your selection, placing content of each line in the deepest child element. This is extremely useful for creating menus:
A well-known tag balancing: search for tag or tag's content bounds from current caret position and selects it. It will expand (outward balancing) or shrink (inward balancing) selection when called multiple times. Not every editor supports both inward and outward balancing due of some implementation issues, most editors have outward balancing only.
This action was written as a simple replacement of Tab stops feature (available in TextMate and Espresso editors) for a quick navigation between important pieces of code after inserting snippet (e.g. expanding abbreviation). But soon it became my favorite and most used action when writing XHTML code. It simply moves caret between important code points where you likely want to edit. These points are marked on the following screenshot:
As you can see, these are points between tags, empty attributes and empty lines.
This action supports relative image paths, like “<img src=”../image.png“ />”, as well as absolute paths: “<img src=”/image.png“ />”.
Merges all lines of current selection. If there's no selection, it will run Balance Tag Outward first and use its result as selection.
Added in v0.6
Removing unneeded tag from document is an exhausting work: you have to remove opening tag, then find and remove closing tag, and then select tag's content and adjust it indentation. This action does very same thing but with a single keystroke. It search for nearest tag from current caret position (Balance Tag Outward) and gracefully removes it, adjusting content indentation if needed.
Added in v0.6
This action quickly switches tag between full and self-closing notation: from “<div class=“test”></div>” to “<div class=“test” />” and vice versa. As usual, it search for nearest tag using Balance Tag Outward. XML/XSL developers would appreciate this action.
Added in v0.6
Unlike many native editor's implementations, this action uses tag balancing to comment/uncomment full tag, not a current line. Currently supports XML/HTML tag commenting; it will toggle comment on current line (with respect of indentation) when called inside CSS document/scope.