BloggerでMarkdown 2

[前回の記事](http://fiahfy.blogspot.jp/2013/10/bloggermarkdown.html)でMarkdown用の設定を行ったが、 どうも[SyntaxHighlighter](http://fiahfy.blogspot.jp/2013/01/syntaxhighlighter.html)と相性が良くないみたいなので別の方法にしてみる Markdown変換用のJSは[marked](https://github.com/chjj/marked) syntax highlighterは[highlighter.js](http://softwaremaniacs.org/soft/highlight/en/)を使用する 以下設定 ###CSS追加 テンプレート→カスタマイズ Bloggerテンプレートデザイナー→上級者向け→CSSを追加 で以下のCSSを追加 .markdown { width:100%; display:none; } ###marked, highlighter.jsをDLしてどこかに置く * [marked](https://github.com/chjj/marked) lib/marked.js を使う * [highlighter.js](http://softwaremaniacs.org/soft/highlight/en/) DOWNLOADから適当にカスタマイズしてDL highlighter.pack.js と任意のcss(例としてgithub.css) を使う marked.js, highlighter.pack.js, github.css 上記ファイルをどこかに置く(やっぱりGoogle Sitesに置いた) ###JS追加 テンプレート→HTMLの編集 * `</head>`の直前に以下を挿入 ```html <!-- Highlight.js --> <link href='[github.cssのURL]' rel='stylesheet'/> <script src='[highlighter.pack.jsのURL]'/> <script language='javascript' type='text/javascript'> hljs.initHighlightingOnLoad(); </script> <!-- Highlight.js --> ``` * `</body>`の直前に以下を挿入(markedの設定とかは適当) ```html <!-- Markdown --> <script src='[marked.jsのURL]'/> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'/> <script language='javascript' type='text/javascript'> $(function(){ marked.setOptions({ gfm: true, tables: true, breaks: false, pedantic: false, sanitize: true, smartLists: true, smartypants: false, langPrefix: '', highlight: function(code, lang) { return code; } }); $('.markdown').replaceWith(function(){ return $('<div/>').html(marked(this.value)); }).show(); }); </script> <!-- Markdown --> ``` ###記事を書いてテスト ``` <textarea class="markdown" disabled="disabled"> ###見出し * リスト1 * リスト2 * リスト3 [リンク](http://) </textarea> ``` ###参考 * <http://yslibr4ry.blogspot.jp/2013/02/markdown.html> * <http://kannokanno.hatenablog.com/entry/2013/06/19/132042>