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>
</div>
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.
<body>
<nav><a href="http://espressoapp.com/${ZEN_ID}">Espresso${ZEN_CLASSES/([^\s]+)/ \U1ドル\E/g}!</a></nav>
</body>
Now, type the following and press tab:
test123#powerup.is.awesome
If all goes right, you now have the result below. Mighty morphin' power snippets!
<body>
<nav><a href="http://espressoapp.com/powerup">Espresso IS AWESOME!</a></nav>
</body>
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>
<footer></footer>