はてなダイアリーの詳細編集画面にリアルタイムプレビュー機能を追加するグリモン書いた

id:nitoyonさん作のtext-hatena.js使わせてもらいました。

インストール

以下のリンクからインストールできます。

使い方

インストールすると詳細編集が以下のようになります。

左側が編集領域で、ここにはてな記法でエントリを書きます。
右側はプレビュー領域になっていて、編集領域に入力した内容をプレビューできます。

Todo

適用されるスタイルが標準(?)のものになっていて、実際に表示されるものと異なるという問題があります。
でも、プレビューで確認したいのは文書の構造とかがちゃんとしてるかを確認したい場合がほとんどなので、スタイルの違いはあまり問題にならないかなーなんて思ってます。

また、text-hatena.jsが対応していない記法とかもあったりして、期待通りのプレビューにならない場合があります。

追記:2009/8/10

  • 「その場編集」モードから遷移して来た場合にちゃんと表示できてなかったので修正。

追記2:2009/8/10

  • 上記修正がリンク先として反映されていなかったので修正。

追記3:2009/8/12

なんか順番が逆になってしまいましたが、調べてみると同じようなことをするスクリプトがいくつかありました。(ブコメで教えてもらったのもあり)

あと、はてな関係のスクリプトは以下にまとめられているので、こんどからここをまず見るようにする。