如何使用 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 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(速記),請參考:

其他功能

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

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

[/av_textblock] [av_one_full first] [av_textblock ]

[previous] [next]

[/av_textblock] [/av_one_full]

與朋友分享...Share on FacebookTweet about this on TwitterEmail this to someoneShare on Google+