在UlrtraEdit中配置Zen Coding的方法

2024-07-15 01:59:33

字體：大中小

來源：轉載

供稿：網友

Zen Coding出來很久一段時間了，鬼哥更是在分享時瀟灑的秀了一把，真是羨慕死人了。最近一直忙著搞需求，只有周末才有時間折騰一下，有點小郁悶~

Aptana配置方法及詳細介紹可以看前端觀察翻譯的Zen Coding: 一種快速編寫HTML/CSS代碼的方法，~~配置起來有些麻煩，每個項目要導入一遍，~~另外雖然Aptana功能很強大，JQ/YUI等智能感知也很爽，不過有些慢 Editplus配置方法見zen code for EditPlus，缺點是zen coding之前要先選中代碼段，麻煩，另外在EP中的Consolas字體顯示也很差勁 Dreamwear配置方法見zen coding的dreamweaver插件安裝教程，額，自從告別ASP后就沒用過DW了 Visual Studio 2008配置方法見[Tool]Zen-coding : Set of plugins for HTML and CSS hi-speed coding，這個很合我意，不過VS太過龐大，哪天系統崩潰時來個緊急需求，安裝起來也要半天 Vim的見在Vim里玩Zen Coding，Vim還木有用過，out了

Zen Coding中最吸引我的是html展開功能，一個輕量級的編輯器就夠了，鑒于此選擇了UltraEdit，用的是烈火漢化綠色版（綠色便攜版沒搞成功，貌似不支持），以下是配置方法：

接下來測試一下，新建文件，敲入以下語句：

復制代碼代碼如下:
div.mod.mod1>div.inner>div.hd+div.bd>ul>li*10>a

之后按下Ctrl+Enter，馬上變成：

復制代碼代碼如下:
<div class="mod mod1">
<div class="inner">
<div class="hd"></div>
<div class="bd">
<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>
<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>
</div>
</div>

大功搞成！
Zen Coding的html書寫規則詳見Zen HTML Elements