%toc

zen-coding 官方网页下载最新版本的 zencoding.vim。安装方法有两种

把 zencoding.vim 复制到 $HOME/.vim/plugin/ 目录下面，这种安装方法装完后，所有语言都能使用 zen-coding 这个插件。方法二是复制 zencoding.vim 到 $HOME/.vim/ftplugin/html 这里的 html 就是指 html这种类型的文件的时候，启用 zen-coding 插件。 VIM ZEN-CODING 插件使用方法

一，在编辑模式下输入

html:xxs>div#header+div#container>ul>li.class_$#id_$*2

按下 <ctrl+y> 然后点 , 逗号。就自动展开为下面的代码。

		 <title></title>
		 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		 <div id="header"></div>
		 <div id="container">
		 <ul>
		 <li id="id_11">
		 </li>
		 <li id="id_22">
		 </li>
		 </ul></div>

二，字符包裹

输入如下符 --------------------- test1 test2 test3 --------------------- 在可视模式下选择这三行，shift+v 然后 shift+g 选中这三行。然后 <ctrl+y>, 。在命令栏输入 ul>li*

		---------------------
		<ul>
		<li>test1</li>
		<li>test2</li>
		<li>test3</li>
		</ul>

		---------------------

如果你输入的是 blockquote，那么可以得到如下的结果

--------------------- <blockquote>

test1 test2 test3 </blockquote>

---------------------

三，标签内联选择

在插入模式下输入 <c-y>d

四，标签外联选择

在插入模式下输入 <c-y>D

五，转到下一个编辑点

<c-y>n

六，转到上一个编辑点

<c-y>N

七，更新 img 标签里面的图片大小（图片必须在本地 vim 能读到的地方）

原代码如下

		<img src="foo.png">
		光标移动到 img 标签，然后按 <c-y>i
		代码自动转换成
		<img src="foo.png" width="32" height="48">

八，合并行

	在如下代码中
		<ul>
		<li class="list1"></li>
		<li class="list2"></li>
		<li class="list3"></li>
		</ul>

		选择所有 li 标签，然后 输入 大 ‘J’。
		代码就变成如下
		<ul>
		<li class="list1"></li>
		<li class="list2"></li>
		<li class="list3"></li>
		</ul> class="brush:"

九，删除标签

	<div class="foo">
		<a>光标在这</a>
		</div>

		按下 <c-y>k 就变成 
		<div class="foo"></div>
		</c-y>

十，分割组合标签

	<div class="foo">
		标签在这里
		</div>

		按下 <c-y>j 后代码变成
		<div class="foo">
		再次按下 <c-y>j 代码就返回原来的样子。
		<div class="foo">
		</div>
		</c-y></div></c-y>

十一，注释

	代码如下
	<div>
		hello world
		</div>

		光标移动到此块代码，按下 <c-y>/ 变成如下
		<!--
		<div>
		hello world
		</div>

		-->

		再按一次就变回来的样子。
		</c-y>

十二，自动给网址添加标签

	光标移动到网址上 http://kejibo.com

	按下 <c-y>a 变成 如下
		<a href="http://kejibo.com/"></a>
		</c-y>

十三，给网址添加注释文本

	<c-y>A 按下后，网址变成
		<blockquote class="quote">

		<a href="http://github.com/">Secure source code hosting and collaborative development - GitHub</a>

		How does it work? Get up and running in seconds by forking a project, pushing an existing repository...

		<cite>http://github.com/</cite>
		</blockquote>