Blogger の記事を markdown で記述する

雑記

『なぜ Blogger のネタをはてダで…』というツッコミは置いておいて Blogger を markdown で記述したくていろいろと試してみたので覚書。
今回、markdown から HTML に変換するのは marked.js を使用します。

[テンプレートを編集]

Blogger のテンプレートの HTML に変換する処理を埋め込む必要があります。
HTML の編集はテンプレートの [Edit HTML] から行います。

[HTML に変換コードを埋め込む]

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>

[記事を書く]

次のように textarea のタグ内で markdown を記述します。

<textarea class="markdown" disabled>

ここに markdown を記述する

# テスト1

### テスト2

* A
* B
* C
 * D
 * E

```
homu
mami
```
</textarea>


こんな感じで表示されます。

[注意]

使用しているテンプレートによってはうまく表示されないかもしれません。