タグ: 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がうまいこと展開されない( ´・_・`)

例えば

をexpand abbreviationすると

とならずに

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

.kitでもemmetを有効にする

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

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

その中の

を開く

下の方に

を追加

snippets.json

これでおk

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

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

こちらはcoda2の環境設定から[エディタ>カスタム言語モード]
.kitに.htmlのカラースキーム適用させる

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


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

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

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

やったーー
yosemiteにインストールしているCoda2.5上で
Emmetが動作しましたワ――゚.+:。ヾ(o・ω・)ノ゚.+:。――イ

Emmet

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

Panic Blog » Introducing Coda 2.5

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

ダウンロードはこちら

Emmet.codaplugin.zip

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


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

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

こんなhtmlがあった時

Wrap with Abbreviation
こう出来る!

素敵っ!

参考

Controlling output position


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

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

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

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

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

追記

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


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)がまだ無いのが残念だなぁ