How to Use Zen Coding

We often receive inquiries as to whether EmEditor supports Zen Coding. Zen Coding is the library that allows you to code HTML and other structured code format significantly faster. For example, the single line

div#page>div.logo+ul#navigation>li*5>a

can be expanded into

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

If you know the HTML structure you want to enter, using Zen Coding allows you to write code much faster than fully writing out the code.

EmEditor offers full support for Zen Coding

Zen Coding, developed by Sergey Chikuyonok and others, is released as a GNU license. The core of the library is developed both in JavaScript and Python 2.5+. One of the advantages of Zen Coding is that the core and the interface (controller) are developed separately in order to be used in various text editors. In other words, the library is designed so that the core can be reused without changes between text editors, and only the interface part must be re-written for different text editors. This modular design minimizes feature implementation variations and glitches between text editors.

Since EmEditor supports JavaScript, the text editor can easily support Zen Coding. In order to begin using Zen Coding in EmEditor, you only need to edit the interface portion of Zen Coding, since the core part needs few or no changes. The EmEditor developer finished porting Zen Coding into EmEditor in just two days. Once the interface is complete, only the core needs to be replaced when newer versions of Zen Coding become available, a far simpler process. Thus, you can use the newest features of Zen Coding without worrying about bugs or missing implementation.

Zen Coding for EmEditor Download

You can download Zen Coding for EmEditor from our Library under the Snippets category. Please install Zen Coding for EmEditor according to the Snippets plug-in method described in the ReadMe file. After installation, you will see a folder named Zen Coding in the Snippets custom bar, with 10 registered actions. Each action can be executed by pressing the shortcut key written in parenthesis after each item.

Zen Coding folder created in the Snippets custom bar.

Zen Coding How To: Expand Abbreviation

Among the 10 actions, the most frequently used is the “Expand Abbreviation” action. This action expands a typed abbreviation into a full HTML code, similar to how CSS selector forms work. Its shortcut is assigned to the F12 key. To expand an abbreviation, type the abbreviation and then press F12. For instance, typing

div#name

and pressing F12 will expand the abbreviation to

<div id="name"></div>

# is used to specify the ID element of HTML. In order to specify a class, use . instead of #. For instance, type

div.name

and press F12 to get

<div class="name"></div>

Using > instead of . will specify a child element. For example,

table>tr>td

is expanded to

<table>
	<tr>
		<td></td>
	</tr>
</table>

If you use +, more than one element is expanded. For instance,

 p.one+p.two

becomes

<p class="one"></p>
<p class="two"></p>

Use [ ] to specify attributes. For instance,

p[title]

is expanded to

<p title=""></p>

Moreover, Zen Coding includes a filter feature, To specify a filter, use |. Typing

p.title|e

will expand it into

&lt;p class="title"&gt;&lt;/p&gt;

The e filter encodes three characters: >, <, and &, which can’t be used as XML literals. There are more filters available.

If you want to describe repeating elements, you can specify repeat times by using * and a number. For instance,

p*3

is expanded to

<p></p>
<p></p>
<p></p>

Furthermore, by using $, you can include sequential numbers within the ID names of class names. For example, you can type

p.name-$*3

in order to get

<p class="name-1"></p>
<p class="name-2"></p>
<p class="name-3"></p>

Special abbreviations such as ul+, table+, and dl+ greatly reduce typing time. For instance,

ul+

is expanded to

<ul>
	<li></li>
</ul>

For more details, please refer to

Moreover, there are many snippets available within Zen Coding. For instance, when HTML configuration is selected in EmEditor,

html:4t

is expanded to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>

</body>
</html>

And when CSS configuration is selected, pressing F12 will expand