Markdown で Blogger の記事を書く

今までこのブログの投稿は HTML で書いてきましたが、さすがに面倒になってきたので、以下のサイトを参考にさせていただき Markdown で書けるようにしてみました。 ちなみにプログラマー御用達のはてなブログなどへの移行も少し考えましたがやめました。 無駄にアカウントを増やしたくない（Google アカウントでやりたい）のと、広告を非表示にできるのと、AdSense との相性が良いことが主な理由です。<br> Blogger が Markdown に対応してくれれば文句ないのですが。 ### 参考URL - http://qiita.com/her0m31/items/1804bdc251a647e0e9a8 ### テンプレートのHTMLの編集 基本的には参考サイトの丸コピーですが、`className` だけ追加しました。 ```html <script src='https://rawgithub.com/chjj/marked/master/lib/marked.js'/> <script> var mdEls = document.querySelectorAll('.markdown'); for(var i in mdEls){ var mdEl = mdEls[i]; var converted = document.createElement('div'); converted.className = 'marked'; converted.innerHTML = marked(mdEl.value); mdEl.parentNode.replaceChild(converted, mdEl); } </script> ``` ### CSS の追加 こちらも丸コピーですが、テーブル関係とコードの定義を追加しました。 ```css /* マークダウン用 -------------------------------------------------- */ .markdown { width:100%; height:auto; overflow:scroll; background-color:#ffffff; } .showdown { background-color:#ffffff } .showdown img { height:auto; width:100%; } .marked table{ border-collapse: collapse; } .marked th{ padding: 6px; text-align: left; vertical-align: top; color: #333; background-color: #eee; border: 1px solid #b9b9b9; } .marked td{ padding: 6px; background-color: #fff; border: 1px solid #b9b9b9; } code { border-radius: 2px; display: inline-block; border: 1px solid #d3d6db; background-color: #f9f9f9; padding: 1px 5px; margin: 3px; } ``` 以下マークダウンのテストです。 --- # 見出し１ ## 見出し２ ### 見出し３ #### 見出し４ ##### 見出し５ - リスト - test - test インラインコード`code`だよ <font color="red">赤文字</font>はHTMLで コードブロック ```csharp namespace hoge { class hoge { int hoge = 0; } } ``` テーブル |header|header|header| |---|---|---| |hoge|hoge<br>テーブル内の改行は`<br>`で|hoge| |hoge|hoge|hoge|