BloggerにMarkdownを導入する

 コードブロックが欲しいのでMarkdownを導入します  


参考記事  

1. [BloggerでMarkdown書けるようにした。]

2. [Markdown で Blogger の記事を書く]


テーマのHTMLの編集

[テーマ] にある [HTMLの編集] のボタンをクリックして、`</body>`の前に下の行を足す。2050行くらいにありました。

```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.innerHTML = marked(mdEl.value);
    mdEl.parentNode.replaceChild(converted, mdEl);
}
</script>
```


CSSの追加

[テーマ] の [カスタマイズ] から [上級者向け] をクリックして、下にスクロールすると [CSSを追加] があるので下の行を追加  

```css
.markdown  {
  width:100%;
  height:auto;
  overflow:scroll;
  background-color:#ffffff; 
}
.showdown {
  background-color:#ffffff
}
.showdown img {
  height:auto;
  width:100%;
}
code {
  border-radius: 2px;
  display: inline-block;
  border: 1px solid #d3d6db;
  background-color: #f9f9f9;
  padding: 1px 5px;
  margin: 3px;
}
```

HTMLテンプレの追加

[設定] から [投稿とコメント] の [投稿テンプレート] に下の行を追加

```
<textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled">
<!--md内容をここに書く!-->
</textarea>
```  

投稿時はHTMLで内容を書いていけば終了です。

人気の投稿