blogger Markdown テンプレート

BloggerでMarkdownを利用する

BloggerでMarkdownを使えるようにします。 テンプレートは「シンプル」で試しています。他のものでも同じだと思います。 ### テンプレート（xml）をダウンロードする テーマ ⇒ バックアップ/復元 ⇒ テーマをダウンロード ### テンプレート（xml）を編集する 適当なテキストエディタで編集します。私は[サクラエディタ](https://sakura-editor.github.io/)がお気に入りです。 <head\>の直後に、以下を挿入します。 ```html <!-- ユーザー変更あり --> <!-- https://fiahfy.blogspot.com/2013/10/bloggermarkdown2.html を参考にしました --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js' /> <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js' /> <script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.17/marked.min.js' /> <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/vs2015.min.css' rel='stylesheet' /> <!-- ユーザー変更あり --> ``` Markdown用のjsファイルの読み込みを優先するつもりで、先頭で読み込みを行っています。参考ページは別々の場所で読み込んでいます。 </head\>の直前に、以下を挿入します。 ```html <!-- ユーザー変更あり Highlight --> <script language='javascript' type='text/javascript'> hljs.initHighlightingOnLoad(); </script> <!-- ユーザー変更あり Highlight --> ``` </body\>の直前に、以下を挿入します。 ```html <!-- ユーザー変更あり Markdown --> <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 --> ``` ### 編集したテンプレート（xml）をアップロードする テーマ ⇒ バックアップ/復元 ⇒ ファイルを選択 ⇒ アップロード ### モバイル テーマをカスタマイズ   この手順を行わないとスマホでうまく表示されません。 ### 投稿テンプレート 設定 ⇒ 投稿、コメント、共有 ⇒ 投稿テンプレートに以下を入力します。 ```html ホームで表示される部分 ＜!--more--＞ ＜textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled"＞ Markdown本文 ＜/textarea＞ ↑ うまくブラウザで表示できないので、「<」や「>」を全角にしています。注意してください ``` 新しい投稿を作成した時、このテンプレートが表示されます。 `<!--more-->`より上部分は、ホーム表示の時にタイトル下に表示されます。  ### 注意点 textareaタグ内ではhtmlタグが使えません。例えば、imgタグを使った画像サイズのコントロールはできません。 どうしてもhtmlタグを使いたいときは、手間ですがtextareaタグ外に記述しましょう。textareaタグは複数あっても問題ありませんので工夫次第で何とかなります。