ZenCoding プラグインで <br> ではなく <br /> にしたい。

798 views
Skip to first unread message

Yuki Anzai

unread,
Dec 17, 2012, 10:03:43 PM12/17/12
to sublime-text-ja...@googlegroups.com
はじめまして。
あんざいといいます。
最近 Sublime Text 2 を使い始めました。

ZenCoding プラグインを使っているのですが、
br まで打ってタブを押すと、<br> になります。
これを <br /> になるようにしたいのですが、
まだ方法を見つけられずにいます。

もし方法をご存知でしたら教えていただけると助かります。

ちなみに link でも最後が /> ではなく > になります。

[Preferences] - [Browse Packages...] から
ZenCoding/zencoding/zen_settings.py
を見て、

'link': '<link rel="stylesheet" href="" />',

のように abbreviations では /> になっているのを確認しています。
よろしくお願いします。

-- 
あんざい ゆき
twitter : @yanzm





Toru Yoshikawa

unread,
Dec 17, 2012, 10:58:56 PM12/17/12
to sublime-text-ja...@googlegroups.com
吉川です。

Twitterで応答してましたが、せっかくなのでこちらで回答します。

ZenCoding/zencoding/parser/utils.py

1245行目:
setup_profile('html', {'check_valid' : True, 'self_closing_tag': False});

のself_closing_tagをTrueに変更して、Sublime Text 2を再起動すれば、
XMLと同じように補完されるようになります。

※ちなみにHTML5では構文上は、"/"ありでもなしでもvalidです

Happy coding :)



2012年12月18日 12:03 Yuki Anzai <anzai...@gmail.com>:
--
Toru Yoshikawa
mail: pikotea[at]gmail.com
twitter: yoshikawa_t
blog: http://d.hatena.ne.jp/pikotea/

Yuki Anzai

unread,
Dec 17, 2012, 11:20:22 PM12/17/12
to sublime-text-ja...@googlegroups.com
吉川さん

ありがとうございます!
できました!

私のところでは
ZenCoding/zencoding/parser/utils.py 
ではなく
ZenCoding/zencoding/utils.py 
でした。

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="" />
でした。

3番目のは zen_settings.py の文字列そのままがでるのかもしれないです。
/ の前にスペースが入って欲しかったので(好みの問題)
3番目にしました。


2012年12月18日火曜日 12時58分56秒 UTC+9 Toru Yoshikawa:

Toru Yoshikawa

unread,
Dec 18, 2012, 12:32:58 AM12/18/12
to sublime-text-ja...@googlegroups.com
吉川です。

検証結果もご報告頂いてありがとうございます!
無事にできたようで、良かった良かった :)


2012年12月18日 13:20 Yuki Anzai <anzai...@gmail.com>:

sada_h

unread,
Dec 20, 2012, 6:04:03 AM12/20/12
to sublime-text-ja...@googlegroups.com
ひらいです。

いまさらですが、ZenCodingの後継のEmmetの場合
XHTMLだと<br / >に展開され、HTML4やHTML5とかだと<br>に展開されました。
https://github.com/sergeche/emmet-sublime

ZenCoding自体が、今後はEmmetとして開発されていくようなので
Emmetへ乗り換えていくと良いかもしれません。


https://github.com/sergeche/zen-coding
https://github.com/emmetio/emmet

-- name => Sadaaki HIRAI mail => j740...@gmail.com

日付:2012年12月18日火曜日、時刻:14:32、差出人:Toru Yoshikawa:

> 吉川です。
>
> 検証結果もご報告頂いてありがとうございます!
> 無事にできたようで、良かった良かった :)
>
>
> 2012年12月18日 13:20 Yuki Anzai <anzai...@gmail.com (mailto:anzai...@gmail.com)>:
> > > 2012年12月18日 12:03 Yuki Anzai <anzai...@gmail.com (http://gmail.com)>:
> > > > はじめまして。
> > > > あんざいといいます。
> > > > 最近 Sublime Text 2 を使い始めました。
> > > >
> > > > ZenCoding プラグインを使っているのですが、
> > > > br まで打ってタブを押すと、<br> になります。
> > > > これを <br /> になるようにしたいのですが、
> > > > まだ方法を見つけられずにいます。
> > > >
> > > > もし方法をご存知でしたら教えていただけると助かります。
> > > >
> > > > ちなみに link でも最後が /> ではなく > になります。
> > > >
> > > > [Preferences] - [Browse Packages...] から
> > > > ZenCoding/zencoding/zen_settings.py
> > > > を見て、
> > > >
> > > > 'link': '<link rel="stylesheet" href="" />',
> > > >
> > > > のように abbreviations では /> になっているのを確認しています。
> > > > よろしくお願いします。
> > > >
> > > > --
> > > > あんざい ゆき
> > > > anzai...@gmail.com (http://gmail.com)
> > > > twitter : @yanzm
> > > > Y.A.Mの雑記帳 http://y-anz-m.blogspot.com/
> > >
> > >
> > >
> > >
> > >
> > > --
> > > Toru Yoshikawa
> > > mail: pikotea[at]gmail.com (http://gmail.com)
> > > twitter: yoshikawa_t
> > > blog: http://d.hatena.ne.jp/pikotea/
> >
>
>
>
>
>
> --
> Toru Yoshikawa
> mail: pikotea[at]gmail.com (http://gmail.com)

Yuki Anzai

unread,
Dec 20, 2012, 5:46:41 PM12/20/12
to sublime-text-ja...@googlegroups.com
ひらいさん

 ありがとうございます。
 ZenCoding でも xhtml なら <br />, html なら <br> になります。
 Emmet いいですね!最近 Emmet に乗り換えました。
 Emmet でも self_closing_tag を変えればできました。
 python だったのが js (/Emmet/emmet/emmet-app.js )に変わっています。
 こちらもブログに書いたので、よかったらどうぞ。
 http://y-anz-m.blogspot.jp/2012/12/sublime-text-2-emmet.html

 あんざい



2012/12/20 sada_h <j740...@gmail.com>:
--
あんざい ゆき
anzai...@gmail.com

Sadaaki HIRAI

unread,
Dec 21, 2012, 9:30:59 AM12/21/12
to sublime-text-ja...@googlegroups.com
あんざいさん。

ひらいです。

>  ZenCoding でも xhtml なら <br />, html なら <br> になります。
おぉ。そうなんですね。知りませんでした。
blog、素敵ですね!僕もいろいろ書かなくては…。

もうちょっと調べてみたら、Emmetでユーザの設定で<br />にできました。
Package Setting > Emmet > Setting - User で、こんな感じの設定をすると
どのHTMLでも<br />になりました。

{
"syntaxProfiles": {
"html": {
"self_closing_tag": "xhtml"
}
}
}

Emmetのreadmeにいろいろ書いてありました。

Also, you can create sections named as extension files (e.g. snippets,
preferences and syntaxProfiles) inside user’s Emmet.sublime-settings
file and write your customizations there. See original settings file
for examples.
https://github.com/sergeche/emmet-sublime#extensions-support

original settings file for examples.
https://github.com/sergeche/emmet-sublime/blob/master/Emmet.sublime-settings#L61

self_closing_tag: should empty elements―like br or img―be outputted
with closing dash, boolean. Values are true, false and 'xhtml'
(string; output closing slash in XHTML style, e.g. <br />).
syntaxProfiles.json
http://docs.emmet.io/customization/syntax-profiles/


いちおう、すごく適当に訳すとこんな感じだと思います。いろいろ省略してます。
# 僕は英語が苦手なので、間違っていると思いますw

ユーザの設定ファイル(Emmet.sublime-settings)で、スニペットや設定やシンタックスをカスタマイズできます。
https://github.com/sergeche/emmet-sublime#extensions-support

オリジナルの設定ファイルを参考にしてね。
https://github.com/sergeche/emmet-sublime/blob/master/Emmet.sublime-settings#L61

syntaxProfiles.jsonの形式で、syntaxProfilesを定義できます。
self_closing_tagでは img や br などの空要素の閉じる / を設定できます。
設定は boolean( true / false )と、"xhtml"が設定できます。
xhtmlを指定すると <br /> みたいに/の前にスペースが入ります。
http://docs.emmet.io/customization/syntax-profiles/

Emmet、さすがですねー。

2012年12月21日 7:46 Yuki Anzai <anzai...@gmail.com>:
Reply all
Reply to author
Forward
0 new messages