Zencoding_keymap

zencoding_manual.html

Zen Code


1.CSS like Selectors


	div -> <div></div>

	div#header.some.classes+ul>li -> <div id="header" class="some classes"></div>
	<ul>
		<li></li>
	</ul>


2.Element Output multiplication

	ul#nav>li*5 -> <ul id="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>


	dl*2>dt+dd -> <dl>
		<dt></dt>
		<dd></dd>
	</dl>
	<dl>
		<dt></dt>
		<dd></dd>
	</dl>


3.Multiplication with numbering

	ul>li#item-$*5>a -> <ul>
		<li id="item-1"><a href=""></a></li>
		<li id="item-2"><a href=""></a></li>
		<li id="item-3"><a href=""></a></li>
		<li id="item-4"><a href=""></a></li>
		<li id="item-5"><a href=""></a></li>
	</ul>



4.Arbitrary Code snippets support

	cc:ie6
	->
	<!--[if lte IE 6]>
		
	<![endif]-->


	div#for-ie>cc:ie6>link+script:src
	-><div id="for-ie">
		<!--[if lte IE 6]>
			<link rel="stylesheet" href="for-ie.css">
			<script type="text/javascript" src="for-ie6.js"></script>
		<![endif]-->
	</div>


5.Multiple Tab plaeholders
	当使用缩写功能并按下Tab(或者Ctrl+Alt+Enter)后，输入一定内容按Tab可以跳转到下一个需要输入内容的点。




6.Inward and outward XHTML tag pair matcher 匹配标签（向外/内扩展）

	Ctrl+Alt+N : outward matcher
	Ctrl+Alt+T : Inward matcher

	<div id="header">
		<ul id="navigation">
			<li class="item"><a href=""></a></li>
			<li class="item"><a href=""></a></li>
			<li class="item"><a href=""></a></li>
			<li class="item"><a href=""></a></li>
			<li class="item"><a href=""></a></li>
		</ul>
	</div>


7. Wrapping with abbreviation
	wrapping > 包装，包裹
	abbreviation > 缩写，省略

	<div id="header">
		<ul id="navigation">
			<li class="item1"><a href=""></a></li>
			<li class="item2"><a href=""></a></li>
			<li class="item3"><a href=""></a></li>
			<li class="item4"><a href=""></a></li>
			<li class="item5"><a href=""></a></li>
		</ul>
	</div>

	在 ul 标签处按下 Ctrl+Shift+N 选中ul标签中的所有内容
	然后按下 Ctrl+Alt+Enter 添加缩写
	如输入 div#wrap>div#wrap-inner 则

	<div id="header">
		<div id="wrap">
			<div id="wrap-inner">
				<ul id="navigation">
					<li class="item1"><a href=""></a></li>
					<li class="item2"><a href=""></a></li>
					<li class="item3"><a href=""></a></li>
					<li class="item4"><a href=""></a></li>
					<li class="item5"><a href=""></a></li>
				</ul>
			</div>
		</div>
	</div>

8.Wraps tag content or tag itself
	<div id="header">
			<ul id="navigation">
				<li class="item1"><a href=""></a></li>
				<li class="item2"><a href=""></a></li>
				<li class="item3"><a href=""></a></li>
				<li class="item4"><a href=""></a></li>
				<li class="item5"><a href=""></a></li>
			</ul>
	</div>

	在 <ul></ul> 前标签处点下光标，然后使用 Alt+Ctrl+Enter 就可以书写覆盖这块内容的标签

	<div id="header">
		<div class="inner">
			<ul id="navigation">
				<div class="inner">
					<li class="item1"><a href="">show</a></li>
					<li class="item2"><a href=""></a></li>
					<li class="item3"><a href=""></a></li>
					<li class="item4"><a href=""></a></li>
					<li class="item5"><a href=""></a></li>
				</div>
			</ul>
		</div>
	</div>


	* 如果在 <div id="header"></div>处输入 div#header+div#page>div#wrap>div#wrap-inner 则：
	<div id="header"></div>
	<div id="page">
		<div id="wrap">
			<div id="wrap-inner">
				<div id="header">
					<ul id="navigation">
						<li class="item1"><a href=""></a></li>
						<li class="item2"><a href=""></a></li>
						<li class="item3"><a href=""></a></li>
						<li class="item4"><a href=""></a></li>
						<li class="item5"><a href=""></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	这个覆盖很神奇，可以注意一下。

9.Special syntax for wrapping each line

	item1
	item2
	item3
	item4

	将上述4个选中后，按下 Alt+Ctrl+Enter 输入 ul>li*
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
	</ul>

	同理，输入 ul>li.item$*>a
	<ul>
		<li class="item1"><a href="/item1/">item1</a></li>
		<li class="item2"><a href="/item2/">item2</a></li>
		<li class="item3"><a href="/item3/">item3</a></li>
		<li class="item4"><a href="/item4/">item4</a></li>
	</ul>


10.New abbrevaitions and snippets can be added as editor's snippets(Espresso only)

11.关于中括号[]、大括号{}的使用
输入 ul>li*5>a[href="www.baidu.com" title="baidu"]{Baidu Index Page}
<ul>
	<li><a href="www.baidu.com" title="baidu">Baidu Index Page</a></li>
	<li><a href="www.baidu.com" title="baidu">Baidu Index Page</a></li>
	<li><a href="www.baidu.com" title="baidu">Baidu Index Page</a></li>
	<li><a href="www.baidu.com" title="baidu">Baidu Index Page</a></li>
	<li><a href="www.baidu.com" title="baidu">Baidu Index Page</a></li>
</ul>


12.快捷键 Ctrl+Shift+U 删除Tag
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
在<ul></ul>处按下 Ctrl+Shift+U 就会删除
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>

13. 快捷键 Ctrl+j 将多行合并成一行
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
->
<ul><li></li><li></li><li></li><li></li><li></li></ul>


14.Ctrl+Shift+Alt+= 计算简单算式
2+1
3


15.Ctrl+Alt+N 匹配标签 当你的光标在<ul>的时候使用这个快捷键会跳转到</ul>
<ul> 
</ul>

16.Ctrl+Shift+A 同时选择匹配的两个标签。

17.Ctrl+Shift+J 拆分或者产生对应标签。 <ul></ul> -> C+S+J -> <ul> -> C+S+J -> <ul></ul>