A Speedy Way To Write HTML/CSS Code
在這篇文章，我們提出一種新的採用類似css selector語法來快速編寫html code，一種得心應手快速編寫html、css code的工具。
我們先來看一個例子，原始碼如下：
html:xt>div#header>div#logo+ul#nav>li.item-$*5>a
那麼，它輸出的結果將會是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div id="header">
<div id="logo"></div>
<ul id="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>
</body>
</html>
一行簡短看似css selector的code竟然能產生這麼完整的html code，是不是很不可思議、很神奇呢！
底下有一個官網簡介的影片，可以快速帶我們進入Zen Coding的世界，就讓我們來觀看此影片吧。
Zen Conding Demo
看完影片後，我們可以先暖身一下，線上demo一下，體驗Zen Coding的威力。
- Demo（使用Ctrl + ,才展開html code）
Zen Coding Downloads (Full Support)
- Aptana (跨平台的html編輯器)
- Coda, via TEA for Coda (Mac)
- Espresso, via TEA for Espresso (Mac)
以上列舉的IDE皆可以完整支援Zen Coding的所有功能。
Zen Coding Downloads (Partial Support, “Expand Abbreviation” Only)
以上的IDE僅支援展開html code的功能。
對於習慣自己編寫html及css code的人，Zen Coding真的是相當方便且強大的工具，透過簡單的理解，特別是對css selector很清楚的使用者，看到那語法想必也對輸出結果略知一二了吧。
另外，筆者在O3noBLOG看到一篇讓vim支援Zen Coding的教學，如果有使用vim的或對wim感興趣的使用者也可以參考。
相關文章：