タグ: emmet

Coda2でCodeKitのKit Languageを編集する際に、Emmetを有効にする方法。

今まで使ってこなかったんですが、CodeKitにはKit languageという簡易テンプレート機能があるみたいなんです。
https://incident57.com/codekit/help.html#kit

参考
CodeKitの新機能「Kit Language」（2012年12月19日）
CodeKitの隠れた秀才「Kit Language」で効率化を図る（2013年03月27日）
CodeKitのKit Language（2014年12月11日）
（随分昔からある機能なんだな…

if文は使えないけど変数は使えて
拡張子.kitの中に.kitファイル（.htmlも可）をimport(include)して保存すれば
合体した.htmlファイルを書き出してくれます。

使いこなせたら便利そうなんだけど、
困ったことに拡張子.kitのファイル中ではemmetがうまいこと展開されない( ´・_・｀)

例えば

ul+

ul+

をexpand abbreviationすると

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

<ul>

</ul>

とならずに

<ul+></ul+>

1	<ul+></ul+>

となってしまい、このままでは使い物にならない。

.kitでもemmetを有効にする

わりと簡単に対応させられました。

/Library/Application Support/Coda 2/Plug-ins/Emmet.codaplugin

1	/Library/Application Support/Coda2/Plug-ins/Emmet.codaplugin

を右クリックして[パッケージの内容を表示]

その中の

/Contents/Resources/snippets.json

1	/Contents/Resources/snippets.json

を開く

下の方に

 "kit": { "extends": "html" },

"kit":{

"extends":"html"

を追加

これでおk

ul+を展開して動作確認してみよう。

ついでに.kitに.htmlのカラースキームを適用させる

こちらはcoda2の環境設定から[エディタ＞カスタム言語モード]

テンプレ使えるようになると、作業ファイルが見やすくなっていいですな。

Share on Tumblr

Coda2.5でEmmetが使えるようになったよーー！ありがとーーー！

[追記 / 2014-12-05]
言語モードがPHP-HTMLでもとりあえず動作させる追加対策の説明がありました
ベースのEmmetは同じモノみたいですね。

【Coda2 Advent Calendar 2014】Coda + Emmetプラグイン復活!! | 自然体
追記ここまで。

やったーー
yosemiteにインストールしているCoda2.5上で
Emmetが動作しましたﾜ――ﾟ.+：｡ヾ(o･ω･)ﾉﾟ.+：｡――ｲ

詳細はパニックブログのコメント欄

Panic Blog » Introducing Coda 2.5

latest version 1.01 works with 2.5!
http://d.froloff.me/fdgY

ダウンロードはこちら

[追記 / 2014/10/25]
あれれ、Match Pair Tag (inward)とかMatch Pair Tag (outward)が反応しない＞＜

Share on Tumblr

emmetで、テキストをWrap with Abbreviationしつつ、valueやhrefなどに同じテキストを挿入する方法

Wrap with Abbreviation時に
option[value=$#]*>{$#}を使うと

こんなhtmlがあった時

北海道 北東北（青森・秋田・岩手）南東北（宮城・山形・福島）関東（東京・茨城・栃木・群馬・埼玉・千葉・神奈川・山梨）信越（長野・新潟）北陸（富山・石川・福井）中部（静岡・愛知・岐阜・三重）関西（京都・滋賀・奈良・和歌山・大阪・兵庫）中国（岡山・広島・山口・鳥取・島根）四国（香川・徳島・高知・愛媛）九州（福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島）沖縄

北海道

北東北（青森・秋田・岩手）

南東北（宮城・山形・福島）

関東（東京・茨城・栃木・群馬・埼玉・千葉・神奈川・山梨）

信越（長野・新潟）

北陸（富山・石川・福井）

中部（静岡・愛知・岐阜・三重）

関西（京都・滋賀・奈良・和歌山・大阪・兵庫）

中国（岡山・広島・山口・鳥取・島根）

四国（香川・徳島・高知・愛媛）

九州（福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島）

沖縄

Wrap with Abbreviation
こう出来る！

<option value="北海道">北海道</option><option value="北東北（青森・秋田・岩手）">北東北（青森・秋田・岩手）</option><option value="南東北（宮城・山形・福島）">南東北（宮城・山形・福島）</option><option value="関東（東京・茨城・栃木・群馬・埼玉・千葉・神奈川・山梨）">関東（東京・茨城・栃木・群馬・埼玉・千葉・神奈川・山梨）</option><option value="信越（長野・新潟）">信越（長野・新潟）</option><option value="北陸（富山・石川・福井）">北陸（富山・石川・福井）</option><option value="中部（静岡・愛知・岐阜・三重）">中部（静岡・愛知・岐阜・三重）</option><option value="関西（京都・滋賀・奈良・和歌山・大阪・兵庫）">関西（京都・滋賀・奈良・和歌山・大阪・兵庫）</option><option value="中国（岡山・広島・山口・鳥取・島根）">中国（岡山・広島・山口・鳥取・島根）</option><option value="四国（香川・徳島・高知・愛媛）">四国（香川・徳島・高知・愛媛）</option><option value="九州（福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島）">九州（福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島）</option><option value="沖縄">沖縄</option>

素敵っ！

参考

Controlling output position

Share on Tumblr

[coda2] emmetのexpand abbreviationをtabキーで実行する

[追記あり / 2013-04-12 16:58]
プラグイン>Emmet>Preferences…から変更できるようになってますね！

これどのバージョンから設定できてたんだろう、全然気づかなかった。

html:4tとかhtml:xtとかをexpand abbreviationしたらbodyタグの無いコードが生成されて、おかしいなぁと設定を見てみたら発見したというわけ
そして肝心のbodyタグがなくなる現象の原因は未だ発見できず。
こうゆうのことわざでなんていうんでしょう。

TEA for Codaもインストールしてるから駄目なのかな？

追記

喜び勇んで投稿しちゃったけど、coda2自前のクリップ挿入機能（tabトリガー？）が効かなくなってしまった。
それはそれで困るので以前の状態へ戻す事にしました(´･ω･)

Share on Tumblr

Coda2のキーボードショートカット用メニューコマンド名 / Emmet（zen-codingの後継）とManipulate

誤字があったらごめんなさい、ご指摘いただけると助かります。

ちなみにWrap With AbbreviationとMatch Pair Tag (outward)が変更できない
環境のせいなのかな…

追記）もしかして
Emmet.codapluginを右クリック>パッケージの内容を表示>Contents>Resources>KeyboardShortcuts.plist
を編集してキーボードショートカットを変更する時に使うcontrol（^）,shift（$）,option（~）,command（@）は割り当てられないのか？

Emmet

[text]Expand Abbreviation
Wrap With Abbreviation
Toggle Comment
Previous Edit Point
Next Edit Point
Select Next Item
Select Previous Item
Merge Lines
Encode\Decode data:URL image
Update Image Size[/text]

Emmet > HTML

[text]
Match Pair Tag (inward)
Match Pair Tag (outward)
Go To Matching Tag Pair
Remove Tag
Split\Join Tag Declaration[/text]

Emmet > CSS

[text]
Reflect Value[/text]

Emmet > Numbers

[text]
Evaluate Math Expression
Increment number by 1
Decrement number by 1
Increment number by 10
Decrement number by 10
Increment number by 0.1
Decrement number by 0.1[/text]

Manipulate

Manipulate > Code

[text]
Align Operators
Trim Whitespace
Wrap Comment[/text]

Manipulate > Markup

[text]
HTML to Markdown
HTML to Textile
HTML to reStructuredText
Markdown to HTML
Textile to HTML
reStructuredText to HTML[/text]

Manipulate > Lines

[text]
Delete Lines
Duplicate Lines Down
Duplicate Lines Up
Insert Line Above
Insert Line Below
Move Lines Down
Move Lines Up
Put Lines
Yank Lines[/text]

プラグインダウンロード先

Emmetは、zen-codingのLine（control+l）と
Line Contents（control+option+l）がまだ無いのが残念だなぁ

Share on Tumblr