Zen-CodingをMTで簡単に使うプラグインを試して、変換候補を追加してみた

caraldo.net | WebとiPhoneとロードバイクが大好き！ » プログラミング » MovableType » Zen-CodingをMTで簡単に使うプラグインを試して、変換候補を追加してみた

この動画の中で、私が一番気になったのは「なんでtextareaって打っただけでタグになるんだ？」というとこでした。
どうやらZen-Codingというツールを使っているようですが私は初耳でした。
この疑問、私だけでは無かったようで

先日の USTREAMでの勉強会でも完全に主役の座を奪ってしまった感のある「Zen-Coding」。私がデモをしている間でも、Twitterで皆様「どうやってコーディングをしているんだ？」と、つぶやきあっていました。
Zen-Condigの基本文法をおさらい

なんて書かれていますｗ

という訳でなんとかこのZen-Codingをこのブログ向け、MTで使いたいと思い探してみました。

先に感想だけ、『感動してます。』

既に誰かMT向けのプラグイン作ってくれてるんじゃないかな～なんて淡い期待でググってみると有りましたｗ

感謝(*´ｪ`*)

早速導入してみました。

h3なんかの見出しタグを良く使うのですが、MTの標準では挿入機能が無いんですよね。
これが、今回のZen-Coding導入で

しかもカーソルはタグの間に！

感動です。

どんな事が出来るかは、以下サイトをご確認頂けば分かります。
⇒Zen-Condigの基本文法をおさらい
zen_textarea.jsを見るだけでも、覚えきれないくらい色々あるのが分かります。

このブログの引用部分のHTMLはちょっと複雑でして、

なんてスタイルになっています。これを挿入出来る様にします。

zen_textarea.min.jsを編集します。はじめzen_textarea.jsの方を編集していて、全然反映されないな～なんてやってましたｗ注意して下さい。

ただ、いきなりzen_textarea.min.jsを見ても、圧縮されていて意味分からないのでzen_textarea.jsで修正したものを反映させる方が良いでしょうね。

追加したのはこんな感じです。499行目に追加しています。
場所は自分が独自で入れたいものの用途に近いとこで、適当です。
今回はhtmlというとこに入れています。

'inyou': '|
',

全部一行で出力されるように記述しています。変換前文字列は、被らないように気をつけて下さい。改行入れたい方は\nを入れて下さい。

~~${child}~~|でカーソル位置が指定出来ます。

まだまだ使い始めですが、見出しと引用が出来る様になっただけで、だいぶ早くなりました。

Zen-Codingお勧めです！

という訳で、@poooooon 使ってね！

10/02/18追記

素敵なサイトで素敵な内容が紹介されていました。

CSSの@iとかはDreamweaverでCSS Documentにしたら動きました。

うわー、もう止められないかも。