Zen Coding：HTML網頁快速編寫利器

Zen Coding是一種簡便撰寫CSS、HTML或XSL的縮寫擴展工具，例如：

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  

上面的代碼只要在縮寫最後加上 |e （Pipe e）就能把<變成 &lt; 能直接放在<pre>...</pre>裡，比手動轉換簡便許多。

它的語法能很有效的加速網頁的編碼時間。今天花了一些時間把我的開發環境的Zen Coding都設置起來。

IntelliJ IDEA 12的Zen Coding設置

IDEA 12已經內置Zen Coding的寫法了，基本上就是套用Live Templates的功能，所以擴展的按鈕是〔Tab〕鍵。

安裝EmEditor的Zen Coding巨集

EmEditor的Zen Coding安裝步驟很簡單：

1. 由Emeditor網站下載代碼片段（Snippets）檔案
2. 解壓縮後把主程式zen_emeditor.jsee複製到C:\Users\使用者\Documents\My Macros\
3. 開啟EmEditor，啟用插件工具列上的代碼片段按鈕（勾選功能表上的檢視→工具列→插件工具列）
4. 左側會出現代碼片段視窗，在其空白處按右鍵→【輸入/輸出】→【輸入到根】→選擇zen-coding-en.eesni
   
5. 代碼片段視窗裡就會出現Zen Coding節點了

設定Emeditor Zen Coding

以下是將EmEditor的操作修改成我的習慣，依個人需求設定即可。

1. 預設的縮寫擴展按鍵是〔F12〕，展開Zen Coding節點→【Expand Abbreviation】項目上按右鍵→【屬性】→【快捷鍵】按Tab鍵，將〔F12〕修改成〔Tab〕
   
2. 編輯C:\Users\使用者\Documents\My Macros\zen_emeditor.jsee，將 \t (Tab)改為兩個空白（約第50行處)

    'variables': {  
      ...
      'indentation': '\t',  // \t改成兩個空白
  

3.　再依自己常用的需求改變縮寫，例如修改縮寫 a：

修改前 | 修改後 ---- | ---- 'a': '<a href="">', | 'a': '<a href="" target="_blank">',

安裝Notepad++的Zen Coding外掛

由這裡下載Notepad++的外掛檔，解壓縮後將所有內容（包含子目錄）複製到 C:\Program files (x86)\notepad++\plugins\，再重新啟動。 主要的程式是C:\Program Files (x86)\Notepad++\plugins\NppScripting\includes\Zen Coding.js，若有需要可比較EmEditor的方法修改，但我沒有特別去找變更擴展按鍵〔Ctrl+E〕的作法。

參考

• EmEditor Zen Code Snippets下載檔
• Notepad++Zen Code Plugin下載檔
• Zen Coding速查表 PDF/ODT

＃＃

The post Zen Coding：HTML網頁快速編寫利器 appeared first on 簡睿隨筆.