Zen Coding – 超快地寫網頁代碼

 Zen Coding 無視了編輯器的自動提示和自動完成，秒殺了你自訂的各種快速鍵或者 AHK 的熱字串，以智能簡潔高效的縮短輸入，帶給你超快速地書寫各種複雜而枯燥的 HTML 和 CSS 代碼的體驗。

 

下面的動態示範圖，只是它強大功能的一部分而已。

 

先舉一個複雜的例子：zen-coding 可以把這樣的代碼：div#header>ul.navigation>li*4>a，變成下面的 HTML 程式碼

<div id=”header”>
    <ul class=”navigation”>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
    </ul>
</div>

看到這熟悉的文法結構，會 CSS 的朋友一定會驚聲尖叫。最妙的是那個“*4”，直接產生 4 個 li 代碼了。沒錯，Zen Coding 就是這樣牛叉的東西，Zen Coding 分為 Zen HTML 和 Zen CSS 兩部分。這兩部分功能是以外掛程式的形式來實現的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下載頁面找到相關的外掛程式。

即使你不使用上面提到的編輯器，那麼還有一種選擇，點擊下載頁面的最後一個連結： Zen Coding for <textarea>。這是一個網頁版的 Zen Coding。開啟 example.html 之後，把游標定位到文字框裡面，按下 Ctrl + E 試試吧。

網頁版快速鍵說明： Ctrl + E：展開代碼 Ctrl + D：向外快速選中代碼塊 Shift + Ctrl + D：向內快速選中代碼塊 Shift + Ctrl + A：輸入一個縮寫，自動延伸並包圍所選代碼 Ctrl + Alt+→ ：游標智能跳轉到下一個編輯點（自己試試就知道多體貼了） Ctrl + Alt+←：游標智能跳轉到上一個編輯點 Ctrl + L：選擇一行

官方示範視頻：Zen CSS 和 Zen HTML。另外，縮寫的含義請看：Zen CSS Properties 和 Zen HTML Elements，各種外掛程式的安裝方法請看官方 wiki。

最後提醒一點：在這個牆外的官方示範視頻(高清)中，牆內觀看地址，還出現了自訂縮寫的示範。具體設定過程請參考官方 wiki。

 

 

下載：官方網站

 

 

P.S. 前端觀察已經寫了詳細的教程 Zen Coding:快速編寫 HTML/CSS 代碼