Editplus中Zen Coding手冊

前面我介紹了一款優秀的代碼編輯器Editplus，並且重點介紹了一下Zen Coding。但是Editplus最新版中包含了Zen Coding的功能，但是無論是幫助文檔，還是官方的文檔都缺少幫助文檔。還好Zen Coding項目的幫助文檔非常的豐富。我整理並測試了一下，Editplus基本實現了Zen Coding的所有的功能。

如果你已經下載了最新版的Editplus或你的Editplus支持Zen Coding，那么你就點擊下面的幾個鏈接去學習使用。

• 編輯HTML http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn
• 使用選擇器 http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
• 編輯CSS http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
• 使用Filter過濾器 http://code.google.com/p/zen-coding/wiki/Filters
• 下載Cheatsheet http://code.google.com/p/zen-coding/wiki/CheatSheets

你學習了上面的一些資料以后，你需要知道以下一些內容。

1. 常用的縮寫或HTML標記
2. 通過>+等創建不同層次結構的標記
3. 了解#id、.class、[title=""]和{內容}，還有|e管道過濾器等
4. *N和$*N循環以及$$$補零等

還需要了解Editplus的一些快捷鍵才能靈活自如的運行這項功能。

Expand Abbreviation  展開縮寫

Ctrl + E

Next Edit Point  跳轉到下一個編輯點

Ctrl + Alt + ]

Previous Edit Point  跳轉到前一個編輯點

Ctrl + Alt + [

Toogle Comment  添加一個注釋

Ctrl + /

最后我們通過一個簡單的示例來結束本文。

1. 新建一個文檔保存為YOUR-FILENAME.html
2. 輸入html:5后Ctrl+E（如果你是基於模板新建的，可以省略這一步）
3. 在Body里面輸入 div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer 后Ctrl+E展開

第3步展開后的代碼如下所示：

<div id="page">
	<div id="header">
		<ul id="nav">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	<div id="page">
		<h1><span></span></h1>
		<p></p>
		<p></p>
	</div>
	<div id="footer"></div>
</div>