如何使用 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

您可以從我們的資源庫下載 Zen Coding，下載文件在Snippets(代碼段)目錄下。請按照在ReadMe檔案中描述的程式碼片段外掛方法來安裝Zen Coding。在安裝完成之后，您將看見在程式碼片段自訂視窗中出現一個命名為Zen Coding的資料夾，有著10個已注冊的動作。每個從左都能通過按壓每項被寫在括號里的捷徑來被執行。

Zen Coding folder created in the Snippets custom bar.

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 組態被選取時，按一下 F12 會把

@i

延伸為

@import url();

更多可用程式碼片段在下面的連結中被描述:

還有一個方便的CheatSheet(速記)，請參考：

CheatSheet

其他功能

延伸縮寫只是Zen Coding的眾多功能之一。有關於別的動作的細節描述，請參考：

Zen Coding操作說明

Zen Coding讓您能更有效率地編寫 HTML 編碼。請盡情在EmEditor中用Zen Coding來編寫HTML和XML程式碼!

← 程式碼片段外掛網頁預覽外掛 →