BloggerでMarkdown

BloggerでMarkdownを使用したいので以下の設定をした ###CSS追加 テンプレート→カスタマイズ Bloggerテンプレートデザイナー→上級者向け→CSSを追加 で以下のCSSを追加

.markdown  { width:100%; height:320px; overflow:scroll; display:none;  }
.showdown { }

###showdown.jsをDL [https://github.com/coreyti/showdown](https://github.com/coreyti/showdown) からshowdown.jsをDLしてどこかに置く(ちょうどいい場所が無かったのでGoogle Sitesに置いた) ###JS追加 テンプレート→HTMLの編集 </body> の直前に以下を挿入

<script src='[showdown.jsのURL]'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'/>
<script>
 $(function(){
     var sd = new Showdown.converter()
     $('.markdown').replaceWith(function(){
         return $('<div/>').html(sd.makeHtml(this.value)).addClass('showdown')
     }).show();
 });
</script>

###記事を書いてテスト

    <textarea class="markdown" disabled="disabled">
    ###見出し
    
    - リスト1
    - リスト2
    - リスト3
    
    [link](http://dummy/)
    </textarea>

###参考 - [http://yslibr4ry.blogspot.jp/2013/01/bloggermarkdowno.html](http://yslibr4ry.blogspot.jp/2013/01/bloggermarkdowno.html) - [http://blog.ccm-lulu.com/2013/01/blogger-markdown.html](http://blog.ccm-lulu.com/2013/01/blogger-markdown.html)