Sublime Package Control に登録されているので、Sublime Package Control を入れている場合は、そこから Zen Coding パッケージを入れれば使えます。
ちなみに Sublime Package Control のインストール方法は、[View] - [Show Console] でコンソールを開いて、そこに Sublime Package Control Installation に載ってるコマンドを入力し、Sublime Text 2 を再起動するだけです。
ZenCoding は例えば
div#page>div.logo+ul#navigation>li*5>a
と入力してタブを押すと
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<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>
に変換してくれる機能をエディタに加えるプラグインです。
Zen Coding syntax は Zen Coding の Google Code の Wiki にあります。
さて、Zen Coding には abbreviations という機能があります。
例えば
<a href=""></a>
のように展開したい場合、
a[href]
と打ってタブを押す必要がありますが、
a
の状態でタブを押しても a[href] と同じように展開されるように略語を設定できる機能です。
他にも
a:link
という略語が用意されていて、この状態でタブを押すと
<a href="http://"></a>
に展開されます。
また、
html:5
でタブを押すと
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
に変換する snippet 機能もあります。
各略語がどのように変換されるかは Zen Coding プラグインフォルダの zen_settings.py に書かれています。
([Preferences] - [Browse Packages...] で開くディレクトリ)/ZenCoding/zencoding/zen_settings.py
私は次のように変更して使っています。
■ 'html' の 'snippets' の
'html:5': '<!DOCTYPE HTML>\n' +
'<html lang="${locale}">\n' +
'<head>\n' +
' <meta charset="${charset}">\n' +
' <title></title>\n' +
'</head>\n' +
'<body>\n\t${child}|\n</body>\n' +
'</html>'
を
'html:5': '<!DOCTYPE html>\n' +
'<html lang="${lang}">\n' +
'<head>\n' +
' <meta charset="${charset}" />\n' +
' <title></title>\n' +
'</head>\n' +
'<body>\n\t${child}|\n</body>\n' +
'</html>'
に変更
■ 'html ' の 'snippets' に以下を追加
（本当は 'common' に入れるべきなんだろうけど、なんか動かなかった。）
'html:t': '<!DOCTYPE html>\n' +
'<html lang="${lang}">\n' +
'<head>\n' +
' <meta charset="${charset}" />\n' +
' <link rel="stylesheet" href="${1:style}.css" type="text/css" />\n' +
' <script type="text/javascript" src="${2:../jquery-1.8.3.min.js}" />\n' +
' <script type="text/javascript" src="${3:main.js}" />\n' +
' <title></title>\n' +
'</head>\n' +
'<body>\n\t${child}|\n</body>\n' +
'</html>'
■ 'html' の 'abbreviations' の
'script:src': '<script type="text/javascript" src=""></script>',
を
'script:src': '<script type="text/javascript" src="" />',
に変更
■ 'html' の 'abbreviations' に以下を追加
'less:css': '<link rel="stylesheet/less" type="text/css" href="${1:style}.less" />',
---
html で（xhtml ではなく）br が <br> に展開されるのを <br /> にするには、
([Preferences] - [Browse Packages...] で開くディレクトリ)/ZenCoding/zencoding/utils.py を変更します。
setup_profile('html', {'check_valid' : True, 'self_closing_tag': False});
の 'self_closing_tag' によって振る舞いが異なります。
■ setup_profile('html', {'check_valid' : True, 'self_closing_tag': False});
だと（デフォルト）
<link rel="stylesheet" href="">
■ setup_profile('html', {'check_valid' : True, 'self_closing_tag': True});
だと
<link rel="stylesheet" href=""/>
■ setup_profile('html', {'check_valid' : True});
だと
<link rel="stylesheet" href="" />
になります。
吉川さんありがとうございます。
0 件のコメント:
コメントを投稿