Notepad++ 的擴充插件 ZenCoding，讓程式寫的更快
Notepad++ 是取代 windows 內建記事本的好方案，不只是因為他功能更多，更主要的原因是他保持了苗條的身材，因此在我所使用的電腦中開啟的速度都相當快；當然還有一點很重要--它是免費的。
Notepad++ 的好處很多，隨便 google 一下就知道，也許改天我會把使用心得寫成另外一篇基礎介紹吧！今天要記錄的是眾多擴充插件中的神兵---Zen Coding。
相較於商業軟體在建立新檔時有眾多規格幫助使用者少key一些基本描述，很多免費軟體是沒有這個功能的，即使有可挑選的種類也不多。像是要開一個 html 檔並宣告為 XHTML 1.1 光是基本要輸入的東西至少要7行。以往我會建立一個基本模版拿來開啟，不過這種方式最怕萬一忘了另存新檔，基礎模版檔就會消失。
在我尋找 notepad++ 的擴充插件中無意間發現了 zen coding 可以幫我處理這件事，更令人吃驚的是它居然可以讓我少打好多重複的標籤，廢話先不說來看一下作者的影片介紹：
有沒有發現使用 css 選擇器的寫法就可以快速寫出一段 html。
首先要先安裝過 notepad++，然後下載 Zen.Coding-Notepad++.v0.6.1.zip 解壓縮到 notepad++安裝資料夾下的 plugins 資料夾中。重新啟動 notepad++ 就可以看到 Zencoding 出現了。
先來提一個最重要的快速鍵： Ctrl + E
這個是把我們輸入的 css 選擇語法轉為 html （因為用習慣 jquery 覺得這種方式還滿好用的）。
來試試看它的用法：
開新檔案時，在第一行輸入 html:xxs ，然後按下 Ctrl + E ，看看發生什麼事了！
沒錯它已經把基本的宣告都輸入進去了。如果要用其他格式宣告呢？
可以試試
html 就是 <html></html>
html:4t HTML 4.01 Transitional
html:4s HTML 4.01
html:xt XHTML 1.0 Transitional
html:xs XHTML 1.0 Strict
html:xxs XHTML 1.1
內容的部份像是輸入
div#logo --> <div id="logo"></div>
div.logo --> <div class="logo"></div>
也可以串接起來寫
div#logo.logo --> <div id="logo" class="logo"></div>
子元素寫法
div#logo>p --> <div id="logo"><p></p></div>
div#logo>p>img --><div id="logo"><p><img src="" alt="" /></p></div>
兄弟元素寫法
div#logo+div#img_area+p>img
--> <div id="logo"></div>
<div id="img_area"></div>
<p><img src="" alt="" /></p>
多元素寫法
div#logo>ul>li*5>a ( li*5 就是指定出現5個 li )
--><div id="logo">
<ul>
<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>
其他用法
外包元素：把要被包圍的 mark 起來，按下 ctrl + shift + A ，在彈出視窗中輸入外面要包的的元素。
<div id="logo"></div> 標示起來，按下 ctrl + shift + A，輸入 div#main，按下 enter
--><div id="main">
<div id="logo"></div>
</div>
快速移動到上一個可編輯的節點：ctrl + alt + [
快速移動到下一個可編輯的節點：ctrl + alt + ]
記住這兩個快捷鍵就可以少按好多下方向鍵或者把手離開鍵盤去用滑鼠。
最後試試看輸入這一行會發生什麼事？
html:4t>div#body>(div#header>ul#nav>li*4>a)+(div#main>(h1>span)+p*2)+div#footer
更多的用法可以下載這篇 Zen Coding 速記表來看。