Zen-Coding

出典: FlashDevelop.jp

HTMLのzen-coding

簡単な使い方

「div」と打って、[Ctrl] + [B]キー もしくは [Ctrl] + [Space]キーを押すと...

div

↓こうなります。

<div></div>

属性

「#」でid

div#hoge

↓

<div id="hoge"></div>

「.」でclass

div.fuga

↓

<div class="fuga"></div>

(>) 子要素

ul>li

↓

<ul>
	<li></li>
</ul>

(+) 隣接した要素

div.foo+div.bar

↓

<div class="foo"></div>
<div class="bar"></div>

(*) 複数の要素

ul>li*3

↓

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

($) 連番

div.item$*3

↓

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

スニペットコマンド

html:5

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

html:xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	
</body>
</html>

ZenHTMLElements

HTMLコメントで囲む

[Ctrl] + [Shift] + [Q]で選択した範囲をコメントで囲む事が出来ます。

設定ファイルの開き方

zenと入力して[Ctrl] + [B]キー もしくは [Ctrl] + [Space]キーを押す。

もしくは、ユーザフォルダ\Data\XMLCompletion\zen_settings.js を開く

日本語向けに設定を変更する

デフォルトでは英語圏向けの設定になっているので、設定の一部を修正する必要があります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

xml:langがenになっていますね。これをjaにしましょう。

zen_settings.jsをエディタで開き、12行目あたりにある記述を書き換えます。

'variables': {
	'lang': 'en',
	'locale': 'en-US',
	'charset': 'UTF-8',
	'profile': 'xhtml',

↓

'variables': {
	'lang': 'ja',
	'locale': 'ja-JP',
	'charset': 'UTF-8',
	'profile': 'xhtml',

これで設定は完了です！

必要であればcharsetも変更してください。

本家との違い

CSSに対応していない。
[]での属性指定が出来ない。
- div[title]
Abbreviationのグループ化が出来ない。
- (div#header>h1)+div#footer
フィルターが使えない。
- div#content>p.title|e
連番の桁合わせが使えない
- li.item$$*3