みなさん WordPress の投稿記事はどういう形式で入力されてますか？自分の場合、快適に Markdown 記法を使いたくてブログを転々としてることもあり、「Markdown on Save Improved」というプラグインを使い Markdown で入力してます。今回、さらなる快適編集環境を求め「Behave.js」という JavaScript ライブラリを導入してみました。
Markdown 環境を求めて
Markdown の存在は、ホッテントリ入りした以下記事で知りました。
それまで技術情報などのナレッジの蓄積は Google Sites で行ってましたが、そのやんちゃなマークアップ変換ぶりの WYSIWYG 仕様にほとほと参っていた当時の自分にとっては「こんな便利かつシンプルな記法があるとは…」と、目から鱗な記事でした。
それ以降、Markdown が使えるナレッジストック環境を求め、クラウドサービスと Markdown パーサーを組み合わせてみたり（参考記事）、Gist を試してたりといろいろしてきました。 メインブログでも Markdown を使いたかったので、一時は Tumblr に引っ越したりもしましたが、「編集画面の仕様変更で使いづらくなったり」、「一部の過去記事が Markdown 形式で再編集できなくなったり」といった試練を経験し、現在の WordPress に至ってます。 メインブログを WordPress にしてからは、ナレッジストックも「Markdown 系プラグイン＋非公開モードでいいんじゃないか」という考えに至り、少しづつデータを移行している今日この頃です。
WordPress と使う Markdown
WordPress で Markdown を使えるようにするプラグインはいくつかあるようですが、自分は以下記事を読んで「Markdown on Save Improved」を使う事にしました。
このプラグインを使うと、常に Markdown 記法で記事を編集しながら、保存するときのみそれが画面表示用の HTML に変換されるようになります。 画面表示時には編集した Markdown 文書ではなく、変換済の HTML が利用されるため閲覧速度に影響はありません。更に、各の記事ごとにこの変換を行うかどうか制御することも出来ます。
WordPress で Markdown 記法を使う – blog.remora.cx
記事の保存時に HTML 変換された記事が作成されるとの事で、パフォーマンスにも優しそうです。これまで使用してて不満に感じるところもありません。
Markdown によるブログと聞くと最近エンジニアに人気な Octopress を思い浮かべますが、このプラグインの存在を理由に WordPress に出戻った方もいるようです。
Markdown on Save ImprovedはMarkdown記法で書いた記事を自動でHTMLに変換してくれる便利なWordpressプラグインです。僕はこのプラグインを見つけて、MarsEditとの組み合わせでOctopress並に快適にブロギングできることを確認してから、Wordpressに戻ることを決意しました。 Octopress並に使いやすいです。てか、Octopressはほぼ単純にMarkdownで書いてプッシュ（デプロイ？）するだけなので、テキストファイルに書いているのと同じ感覚ですね (中略) 最強のプラグインだこれ！
いいいつの間に！Markdown on Save Improvedが使いやすくなってる！ – Morizotter Blog
最強らしいので安心して使いたいと思います。
Behave.js でさらに快適に
ただ、当然といえば当然ですが、記事本文の編集はテキストエリアで行うため Tab キーを押しても Tab は挿入されません。プログラムのサンプルコードを記述する際は pre タグつまり Markdown では Tab を行の先頭に入力する必要があり、この点が不便だなぁと感じてました。
そこで TEXTAREA を「IDE っぽく」することができるという「Behave.js」を導入してみました。
「Behave.js」は jQuery 非依存の JavaScript ライブラリで、以下のような簡単な記述で、TEXTAREA に Tab を挿入したり、簡単なコード補完をしてくれるようなります。（デモはこちら）
今回も「WordPress こまごま設定プラグイン」の１機能として追加してます。「My Setting」画面の「投稿画面でBehave.jsを有効にする」で「はい」指定すると適用されます。Behave.js のパラメータも指定できます。
Behave.js 以外の選択肢
贅沢かもしれませんが、若干 Behave.js の不満な点もあります。Tab 入力でインデントすると Tab がスペースに自動変換されてしまうとろです。ソースコードのインデントの Tab / スペース問題は、しばし議論になるところですが、世間的にはスペースが正解というのが主流かと思うので、Behave.js の仕様としてもこれでいいのかもしれません。
Tab の挿入についてのみなら自前で実装するという選択肢もあるかと思います。ただ、個人的には見た目上「1 Tab = 4 Space」のインデントとしたいのですが、ブラウザの仕様上「1 Tab = 8 Space」という前提があり、これを解決するのはかなり面倒そうなのでやめました。
ちなみに GitHub や Cloud9 でも採用されてる「Ace Editor」という JavaScript ライブラリを使えばいづれの問題も解決することができます。
が、本格的な Web IDE として採用される程の高機能ライブラリを、ブログで Tab インデントとしたいだけでそこまでするか・・・という感じでもあります。（興味はすごいあるので別の機会に使ってみたい気持ちありますが） Behave.js の「IDE っぽい」というところがマッチしてるような気がします。
あと、最近まで気が付かなかったんですが、編集画面の「フルスクリーン」モード、GitHub の ZEN モードみたいですごくいいですね。あとは Markable みたいにリアルタイムプレビューできれば完璧なんだけどなぁ。贅沢かｗ
ダウンロード
こちらからどうぞ。
あ、あと旧バージョンのソースに細かな不具合が結構あったので修正しております。もし既に使用されてましたら最新版をご利用ください。
