Zen shortcuts are CSS selector-like sequences of trigger keywords that expand into a full structure when you press tab . By default, Espresso exposes all HTML tags present in CodeSense as Zen triggers. This means you can expand a sequence like this:

div#helloworld p.yay a

Into this full HTML:

<div id="helloworld">
	<p class="yay"><a href="http://">Link Text</a></p>


Standard Zen shortcuts are handy, but the real power comes from the ability to integrate your own snippets. Click the Zen toolbar button and choose Edit Snippets. Try setting up a new snippet with a Zen trigger of "test123" and the contents below. Note the use of the ${ZEN_ID} and ${ZEN_CLASSES} variables.

	<nav><a href="${ZEN_ID}">Espresso${ZEN_CLASSES/([^\s]+)/ \U$1\E/g}!</a></nav>

Now, type the following and press tab:

If all goes right, you now have the result below. Mighty morphin' power snippets!

	<nav><a href="">Espresso IS  AWESOME!</a></nav>


More advanced combinators are also supported, like "+" and "*N". The former places expanded triggers next to each other instead of inside. The latter expands the trigger N times. For example:

div#helloworld*3 + footer

Expands into:

<div id="helloworld"></div>

<div id="helloworld"></div>

<div id="helloworld"></div>