作者kewang (浪費愛情)
看板Web_Design
標題[分享] Zen Coding - 極速開發HTML最重要的利器之一
時間Sun Dec 13 00:51:30 2009
網頁版：
http://kewang.pixnet.net/blog/post/25418325
上個月看到一篇文章「Zen Coding: Generating HTML from selectors」，這真的是太酷
了啦！只要你會CSS Selector，這個叫做Zen Coding的plugin就可以幫你用Selector完成
各種的HTML。像你只要打了下面這一串
1 html:xt>div#header>div#logo+ul#nav>li.item-$*5>a
就會變成下面這個HTML了，很神奇吧！
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en">
03 <head>
04 <title></title>
05 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"
/>
06 </head>
07 <body>
08 <div id="header">
09 <div id="logo"></div>
10 <ul id="nav">
11 <li class="item-1"><a href=""></a></li>
12 <li class="item-2"><a href=""></a></li>
13 <li class="item-3"><a href=""></a></li>
14 <li class="item-4"><a href=""></a></li>
15 <li class="item-5"><a href=""></a></li>
16 </ul>
17 </div>
18 </body>
19 </html>
有興趣的可以到這個地方玩玩看。其實現在已經有很多編輯器支援了，像是Aptana、
Visual Studio、TextMate......等，可是我沒看到vim跟PSPad呀！！！
如果想要安裝Zen Coding在Visual Studio上面的話，可以看看這兩篇文章「ZenCoding
Visual Studio AddIn」和「Zen Coding – a very fast way of generating (HTML)
elements in your editor!」，步驟還蠻詳細的。我看Zen Coding應該也會跟jQuery一樣
，很快就會盛行在撰寫HTML上面了吧！
參考資料：
Ajaxian >> Zen Coding: Generating HTML from selectors
zen-coding - Project Hosting on Google Code
Zen Coding plugin for editArea
ZenCoding Visual Studio AddIn >> tech.einaregilsson.com
Zen Coding - a very fast way of generating (HTML) elements in your editor! | w
ww.netsi.dk
--
雜七雜八的kewang部落格
http://kewang.tw
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.167.131.112
→ PsMonkey:ㄜ？ 說真的，這個東西能幹麼？ 12/13 01:05
→ nobody1:程式碼產生器 12/13 01:31
→ lgzenith:看起來很有趣，不過vim沒辦法用就興致缺缺阿... 12/13 01:44
推 didigh:對於我這種用手刻網頁的人來說很好用！ 12/13 10:14
→ EvilBrave:蠻有趣的東西 XD 12/13 10:20
推 didigh:可惜沒有支援Coda阿 QQ 12/13 10:22
推 wxyy:蠻好玩的.... 12/13 13:20
推 evenwu:用滿久的了，確實方便 12/13 17:55
推 terrylchen:剛才安裝了起來，還挺有趣的 12/14 01:24
推 chrisQQ:大推，我都手刻！！不過不支援 vim 真是殘念… 12/14 02:29
推 TonyQ:感覺頗帥 有下有推 XD 12/14 10:28
推 hougzou:感覺很方便呢！ 12/14 10:52
推 rexkimta:沒有支援n++……orz 12/15 01:10
推 aiyswu:np++ 有支援 08/08 00:27