如何使用 Zen Coding

我们收到很多客户发给我们的电邮，询问 EmEditor 是否支持 Zen Coding。Zen Coding 是一个代码资源库让您能显著地加快编写HTML和其他结构化代码格式速度。例如，下面的单一行

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

可以被延伸为

<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>

如果您知道您想要输入的HTML结构，使用Zen Coding就能让您比手写出完整代码要快很多。

EmEditor 完全支持 Zen Coding

Zen Coding，是由Sergey Chiuyonok 等人开发，作为一个 GNU 授权被发布。资源库的核心同时在JavaScript和Python 2.5+中被开发。Zen Coding的优点之一是它的核心和界面(控制器)是分开来开发的，为了能在不同的文本编辑器中被使用。换一句话说，资源库这样的设计是为了不用做任何改变，核心就可以被重新使用，并且只有界面部分会在不同的文本编辑器中被重写。这个模型设计使Zen Coding 能在多个文本编辑器中最小化功能执行变量和故障。由于EmEditor支持JavaScript，它也能方便地支持Zen Coding。要在EmEditor中使用 Zen Coding，您只需编辑Zen Coding的界面部分，因为它的核心部分只需要少量的改变。EmEditor的开发者仅仅用了两天就把Zen Coding 移植到EmEditor中。一旦这个界面完成，当新版的Zen Coding 推出时，您只需替换核心部分就可以了。这样，您可以使用最新的Zen Coding功能，而不用担心bug或是执行不当。

下载用于 EmEidtor 的 Zen Coding

您可以从我们的 Snippets(代码段)目录下的资源库中下载 Zen Coding 。请按照在ReadMe文件中描述的代码段插件方法来安装Zen Coding。在安装完成之后，您将看见在代码段自定义窗口中出现一个命名为Zen Coding的文件夹，有着10个已注册的操作。每个操作都能通过被写在括号里的快捷键来被执行。

Zen Coding 的使用: 扩展缩写

在10个操作中，最频繁使用的是“扩展缩写”操作。这个操作能够把输入的缩写扩展为一个完整的HTML代码，与CSS选择器形式一样。它的快捷键是F12。要扩展一个缩写，请输入这个缩写，然后按一下F12。例如，输入

div#name

按一下F12可以把缩写扩展为

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

# 被用来指定HTML的ID元素。要指定一个class，用 . 而不是 # 。例如，输入

div.name

再按一下F12来获取

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

使用 > 而不是 . 可以指定一个子元素。比如，

table>tr>td

会被扩展为

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

如果您使用+,多于一种元素会被扩展。比如，

 p.one+p.two

会成为

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

p[title] 使用 [ ] 来指定特性。比如，

p[title]

可以被扩展为

<p title=""></p>

另外，Zen Coding 还包括一个筛选器特性。要指定一个筛选器，使用 |. 输入

p.title|e

将把它扩展为

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

这个 e 筛选器会把3个字符编码：” >” ，”<” ，还有 “&”，因为这些字符不能被用作XML文本。

还有更多别的筛选器可用。如果您想要描述重复的元素，您可以通过使用 * 和一个数字指定重复次数。比如，

p*3

可以被扩展为

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

而且，如果使用 $ 号，您可以把ID名字在内的序列号包括在内。例如，您可以输入

p.name-$*3

来获得

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

特殊的缩写，例如 ul+，table+，还有 dl+ 大大减少了输入时间。例如，

ul+

被扩展为

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

更多详细信息，请参考:

还有许多代码段可用于Zen Coding。

例如，当HTML配置在EmEditor中被选取时,

html:4t

被扩展成

<!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>

这样的形式。

当CSS配置被选取时，

@i

按一下F12会变成

@import url();

您可以参考下面的链接来查找可用代码段：

还有一个方便的 CheatSheet (快速查看工具)，您可以到下面的链接中查看：

CheatSheet

其他特性

扩展缩写只是Zen Coding的众多功能之一。所有操作的细节，请参考：

Zen Coding操作帮助

Zen Coding让您能更有效率地编写 HTML 编码。请尽情在 EmEditor 中用 Zen Coding 来编写 HTML 和 XML 代码吧！

← 代码段插件网页预览插件 →