Espresso

Zen

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>

Customize

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]+)/ \U$1\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>

Advanced

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>