« Ruby1.9.2&NetBeans7インストール | メイン | eoblogをMarkdown記法で書く2(SyntaxHighlighter導入) »

2011年12月15日 (木)

eoblogをMarkdown記法で書く

ブログを書き始めたのはいいけど、デフォルトで提供される記事編集画面はどうにも使いづらい。
やっぱり使い慣れたエディタ(vim)で書きたい!
でもHTMLで書くのも嫌だ!

てなことを考えてたんですが、同じ事考える人はやっぱりいるみたいで、軽量マークアップ言語というジャンルがあるらしいということが分かりました。
何が一番有名なのかは知らないけど、一番最初に検索で引っかかったのがMarkdown記法で調べてみるとなかなか書きやすそうだったので、これで行くことにします。

Markdownの詳細は
Markdown文法の全訳
Markdown(wiki)
を参照して下さい。

なおOSはWindows XP(SP3)、Ruby 1.9.2-p290の環境で動作確認しました。

kramdownのインストール

Markdown記法で書いてもそのままではブログにアップできないので、HTMLに変換する必要があります。
自力で変換するのは本末転倒なんで、なにかないかなーと探してみると、各スクリプト言語毎に変換ライブラリが存在するみたいです。丁度RubyかPythonかを勉強してみたいな。と思ってたんで、その観点で調査すると、Ruby用のkramdownというのが結構よさげ。

ということで、kramdownをインストールしてみました。
コマンドラインで

$ gem install kramdown

とするだけ。あとはお任せしておけばインストールできます。

kramdownの実行

インストールすると、kramdown.batが$RubyInstallPath/binにインストールされます。

通常、ここはPATHが通ってるはずなので、コマンドラインで

$ kramdown hoge.mkd

とかすれば、標準出力にHTMLに変換されたテキストが出力されます。あとはこれをコピペ・・・でもいいんですが、

$ kramdown hoge.mkd > hoge.html

とリダイレクトしておく方が便利だと思う。

コマンドラインオプションは特に指定しなくても良いと思いますが、知りたいのなら

$ kramdown -h

として確認して下さい。

補足

コマンドラインでkramdownに渡すファイルの文字コードはシステムデフォルト(Windows XPならShift-JIS)でないと駄目みたい。
UTF-8とかで書かれたファイルを渡すとエラーになります。UTF-8で書かれたファイルを渡したい場合はスクリプトを書いて、UTF-8エンコーディングされた文字列を渡してやるときちんと動きます。

Shift-JISの文字列処理でよく問題になる2バイト目が0x5C(‘\‘)となる文字「貼能表暴予など」があっても適切に処理されます。

例えば

これが表*強調*です

の内容のファイルを渡しても

<p>これが表<em>強調</em>です</p>

と適切に処理されます。(“*“がエスケープされない)。
この辺はさすがに国産スクリプトエンジンですね\(^O^)/

eoblogの設定変更

HTMLを貼り付けられるように、また改行を無視するように設定を変更します。

1.ブログ記事作成画面で「この編集画面の設定変更」をクリックします。

記事作成画面

2.次に表示される画面で、編集モードを「プレーンテキスト」、編集画面を「上級」または「カスタム」にして改行設定には最低限チェックを付けておき、[保存]ボタンで設定を保存します。

設定作成画面

3.ブログの「設定」→「表示設定」のページに行って、「改行設定」を”なし”にして[変更を保存]ボタンを押します。

表示設定画面へのリンク

表示設定画面

以上で設定は完了です(改行設定は1カ所だけでいいのかな?「3.」は不要かもしれない)

あとは変換したHTMLを「記事の内容」または「追記」に貼り付ければOK。
この時改行設定が「なし」になってるのを確認して下さい(設定をいじくってるのがいけないのかたまに「改行を反映」になってるときがある)

イメージの挿入

Markdown記法でイメージを挿入する場合、以下のように書きます

![Alt text](/path/to/img.jpg)
            or
![Alt text](/path/to/img.jpg "Optional title")
            or
![Alt text][id]
[id] : url/to/image  "Optional title attribute"

eoblogでは 「ホーム/default/西暦年(4桁)/月/日」 のフォルダに画像を入れるみたいなので、

![記事作成画面2](http://onibibo.blog.eonet.jp/default/images/2011/12/15/WS000005.PNG)

みたいに記述すれば<IMG>タグは挿入されます。あとはそれをどうアップするか。ですが、記事編集画面のツールバー

記事作成画面2

をクリックするか、「コントロールパネル」→「ファイル」をつかってファイルを直接アップする必要があります。
どちらも面倒ですが、コントロールパネルのファイルアップロードの方が若干早い(いずれにせよ1個ずつファイルアップしないと駄目ですが)ような気がします。コントロールパネルのファイルアップロード使うなら、画像ファイルの場所はどこでも良いような気がしますが、先ほどの場所以外にアップすると、「フォトアルバム」で画像が確認できないと思います(だから何やねんといわれると困るか)
あと記事編集画面ツールバーから挿入すると、ファイル名が小文字になるみたいなんで、画像ファイル名は小文字にしといた方が嵌まらないかも(実例では大文字ですが(^_^;)

幅やサイズの指定は本来のMarkdown記法では出来ないんですが、kramdownではインライン要素は後、ブロックレベル要素は開始直前に{: xxx=yyy}と書けば属性を指定できます。

![記事作成画面2](http://onibibo.blog.eonet.jp/default/images/2011/12/15/WS000005.PNG){: width="300"}

と書くと

<p><img src="http://onibibo.blog.eonet.jp/default/images/2011/12/15/WS000005.PNG" alt="記事作成画面2" width="300" /></p>

と変換されます。

あと今のままではポップアップウィンドウを出すことは出来ません(頑張ってHTMLタグ書けば出来ますが・・・。)。その辺はプレビューできるようにスクリプト書こうと考えてるので、その時にやる予定。

トラックバック

このページのトラックバックURL:
http://app.blog.eonet.jp/t/trackback/558347/27608061

eoblogをMarkdown記法で書くを参照しているブログ:

コメント

コメントを投稿

最近のコメント