やったー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 - ](http://dvdotsenko.blogspot.jp/2012/08/markdown-with-blogspotcom-and-bloggercom.html) - [404 Blog Not Found:Tips - MarkdownをHTMLにembedする - ](http://blog.livedoor.jp/dankogai/archives/51818456.html) という２つの記事を見つけた。 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は[*こちら*](https://github.com/coreyti/showdown)からダウンロードできるので、独自のサーバに上げるなり、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>`タグを使う場合は、閉じタグを`&lt;textarea>`こんなふうにエスケープしなくてはならない。 ------------- 以上。今後はこんな感じで記事を書いていこうかなあ。 Markdown内のコードをいい感じにシンタックスハイライトする方法については、また今度書く予定。 --- update 2013-02-03: [シンタックスハイライトする記事](http://yslibr4ry.blogspot.jp/2013/02/markdown.html)書いた