• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2013/01/16

Zen-Coding(Emmet)でコード展開時にクラス名・ID名のコメントを自動追加する方法

HTML Code
HTML Code / Sebastian Fuss

愛用のテキストエディタ「Sublime Text 2」にも導入しております、Emmet(Zen-Codingの次期バージョン)。使いこなすことでHTML、CSSの記述を高速化することが出来ます。

Skitched 20130115 141730
んまぁ例えばこんな風に記述して展開すると…

 

Skitched 20130115 141823
このようにHTMLを吐き出してくれます。

で。MacのエディタCoda2のプラグイン「Tea for Coda」にてdiv要素を閉じた時に自動でコメントをつけてくれるカスタマイズみたいな感じでクラス名・ID名のコメントを自動的につけてくれる方法はないものかと調べていたところ、Web Design KOJIKA17さんの記事Zen-Coding、0.7のすすめ|Web Design KOJIKA17に以下のような記述を発見。

フィルター
HTMLの展開をサポートするフィルターも用意されています。
|(バーティカルバー)で区切って、最後にフィルターのコードを記述して下さい。
コメントアウト(c)
#header>h1#logo|c

via: Zen-Coding、0.7のすすめ|Web Design KOJIKA17

なん・・・だと・・・知らなかった・・・パスタ・・・

 

Skitched 20130115 141949
早速やってみましょう。こんな風に展開前のコードを書いて、最後に「|c」を追加。で、展開…

 

Skitched 20130115 142157
見事、各IDのコメントを閉じタグの直後に追加してくれました:) (クラス名も行けますよー)

あぁ…愛してるよ…Emmet…//

関連:高機能テキストエディタ「Sublime Text 2」をDLしてみた&導入したプラグイン

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×