在UlrtraEdit中配置Zen Coding的方法

2024-07-16 17:45:05

字體：大中小

供稿：網(wǎng)友

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

Aptana配置方法及詳細(xì)介紹可以看前端觀察翻譯的Zen Coding: 一種快速編寫HTML/CSS代碼的方法，~~配置起來有些麻煩，每個(gè)項(xiàng)目要導(dǎo)入一遍，~~另外雖然Aptana功能很強(qiáng)大，JQ/YUI等智能感知也很爽，不過有些慢 Editplus配置方法見zen code for EditPlus，缺點(diǎn)是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，這個(gè)很合我意，不過VS太過龐大，哪天系統(tǒng)崩潰時(shí)來個(gè)緊急需求，安裝起來也要半天 Vim的見在Vim里玩Zen Coding，Vim還木有用過，out了

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

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

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

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

復(fù)制代碼代碼如下:
<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書寫規(guī)則詳見Zen HTML Elements