やったーBloggerにmarkdownで記事を投稿できたよー＼(^o^)／

Markdown最近始めたので、bloggerでも使いたくていろいろ探してみた。
bloggerの機能としては提供されていないので、以下の様な方法をとる必要がある。

1. Markdown Editor(MouとかKobitoとか)を使ってMarkdownで記事を書き、HTMLにコンバートしてbloggerに貼り付ける。
2. bloggerのテンプレートにJavaScriptを仕込み、画面読み込み時にMarkdownの文章をHTMLにコンバートする。

個人的に1の方法は避けたかった。後からの編集がめんどくさいのは勘弁してほしい。
やはりbloggerに直接Markdown記法で書けるのが一番望ましい。

そんなこんなでWebを色々探してたら、

• This works...: Markdown with blogspot.com and blogger.com -
• 404 Blog Not Found:Tips - MarkdownをHTMLにembedする -

という２つの記事を見つけた。

1つ目の記事の手法は、Markdownのコードブロック内でscriptタグが使えないという問題があったので断念。
2つ目の手法ではscriptタグも行けそうだったので、こちらを参考にして手順を説明していく。

また、この記事自体も今回紹介する方法を使いMarkdownで記述している。

手順

1. CSSをBloggerのテンプレートに登録する

ダッシュボードのテンプレートセクションで、カスタマイズ -> アドバンス -> CSSを追加、と進み、以下のスタイルを追加する

.markdown {width:100%; height: 320px; overflow: scroll; background-color: #ffffff; }
.showdown {background-color: #ffffff; }

2. Markdownを変換するコードをテンプレートに埋め込む

同じくダッシュボードのテンプレートセクションで、「HTMLの編集」を選択する。

表示されたダイアログの中で、</body>タグを検索し、その直前に下記のコードを挿入し、保存する。上の記事ではjQueryを使っていたが、ここでは使わない形に書き直している。

<script src="/path/to/showdown.js"></script>
<script>
var sd = new Showdown.converter(),
      mdEl = document.querySelector('.markdown'),
      converted = document.createElement('div');

converted.className = 'showdown';
converted.innerHTML = sd.makeHtml(mdEl.value);
mdEl.parentNode.replaceChild(converted, mdEl);
</script>

また、/path/to/showdown.jsは各自で任意のパスに書きなおす必要がある。
showdown.jsはこちらからダウンロードできるので、独自のサーバに上げるなり、GitHubでフォークしてそこから呼ぶなりするといいのではないだろうか。
ちなみに私の場合は、個人用のCDNとして使うためのGitHub Pagesを作り、そこでshowdown.jsをホスティングしている。

3. Markdownで記事を書く

以下の要領で、<textarea>タグの中にMarkdownで記述する。

<textarea class="markdown" disabled>
#this blog is written with Markdown! ;)

- this
- is
- list

you can use [link](http://yslibr4ry.blogspot.com/) and other Markdown functionality as usual!
</textarea>

※注意事項

この方法では<textarea>タグの中にMarkdownを記述している。
そのため、当然ではあるがMarkdown記事の中に</textarea>があるとそこでtextareaが終わってしまい、後続のMarkdownがそのまま表示されてしまう。 これを防ぐため、Markdown中で<textarea>タグを使う場合は、閉じタグを<textarea>こんなふうにエスケープしなくてはならない。

---

以上。今後はこんな感じで記事を書いていこうかなあ。

Markdown内のコードをいい感じにシンタックスハイライトする方法については、また今度書く予定。

---

update 2013-02-03: シンタックスハイライトする記事書いた