Kohshi's Blog: Bloggerでの投稿をmarkdownで書く

Bloggerのエディタが使いにくくて投稿しにくいのでなんとかmarkdownでできないかなと思い、
色々調べたら、いくつか参考にさせてもらったけどここ↓を主に参考にさせてもらってmarkdown対応してみました。

* [Ys' Library | JS/HTMLのtipsやガジェットについて書くブログ](http://yslibr4ry.blogspot.jp/2013/01/bloggermarkdowno.html)

基本は、

* htmlを直接記入するエディタモードを使う。
* markdown全体をtextareaで囲み、class="markdown"に割り当てる
* Javascriptでtext文を取得してshowdown.js等のmarkdown -> HTML変換をして置き換える

という方針みたいです。

詳細はリンク先をみてもらうとして、
自分の環境では以下の変更を加えました。

**トップページで複数の投稿が並んでいる際に、1番目の投稿以外はtextareaがそのまま表示されてしまう**

リンク先のサイトだと問題無く表示されていたのですが、自分の環境ではなぜか
一番先頭（最新）の投稿は正しく表示されるが2番目以降の投稿はtextareaにmarkdownでかかれた内容が、こんな感じ↓でそのまま表示されている状態になってしまいました。

リンク先には↓の“HTMLの編集“から</body>の前に以下のjavascriptを挿入するとなってました。

```javascript:
<script src="/path/to/showdown.js"></script>
<script>
var sd = new Showdown.converter(),
      mdEl = document.querySelector('.markdown'),
      converted = document.createElement('div');

converted.className = 'showdown';
converted.innerHTML = sd.makeHtml(mdEl.value);
mdEl.parentNode.replaceChild(converted, mdEl);
</script>
```

でも、自分環境だとどうもダメ（テンプレートのせい？）で、いろいろと試行錯誤した結果以下のようにしました。

```javascript:
<script src='/PATH TO/showdown.js'/>
<script type='text/javascript'>
  var sd = new Showdown.converter();
  var mdEls = document.querySelectorAll(".markdown");
  for(var i = 0; i < mdEls.length; i++){
    converted = document.createElement('div');
    converted.className = 'showdown';
    converted.innerHTML = sd.makeHtml(mdEls[i].value);
    mdEls[i].parentNode.replaceChild(converted, mdEls[i]);
    window.setTimeout(function() {
      document.body.className = document.body.className.replace('loading', '');
    }, 10);
  }
</script>
```

違いを要約すると、querySelector()の代わりにquerySelectorAll()を使って
textareaをNodeListで取得して全てのNodeに対してshowdownのmakeHtml()をかけて置き換えてるだけです。

最終的にはshowdown.jsのextensionのtable.jsを使って（showdownはデフォルトではtableの記述に未対応）以下のようにしました。

```javascript:
<script src='/PATH TO/showdown.js'/>
<script src='/PATH TO/extensions/table.js'/>
<script type='text/javascript'>
  var sd = new Showdown.converter({extensions: ['table']});
  var mdEls = document.querySelectorAll(".markdown");
  for(var i = 0; i < mdEls.length; i++){
    converted = document.createElement('div');
    converted.className = 'showdown';
    converted.innerHTML = sd.makeHtml(mdEls[i].value);
    mdEls[i].parentNode.replaceChild(converted, mdEls[i]);
    window.setTimeout(function() {
      document.body.className = document.body.className.replace('loading', '');
    }, 10);
  }
</script>
```

注意点としてはextensionのtable.jsは先頭に|がないと表にならない事。

ダメ

> First Header | Second Header | Third Header<br/>
> ------------ | ------------- | ------------<br/>
> Content Cell | Content Cell  | Content Cell<br/>

イケる

> | First Header | Second Header | Third Header |<br/>
> | ------------ | ------------- | ------------ |<br/>
> | Content Cell | Content Cell  | Content Cell |<br/>

これ以外はprettify.jsでのコードハイライトなども以下を参考にさせてもらいました。
どうもありがとうございます(^^)

* [Markdownで投稿した記事のソースコードの見た目をいい感じにする](http://yslibr4ry.blogspot.jp/2013/02/markdown.html)

最後に一点だけ注意点ですが、以下の歯車アイコンでモバイル向けの設定をカスタムにしないと、スマホで見た時にやっぱりtextareaがそのまま表示されちゃうので注意。

以下をカスタムにする。

結構たいへんだったけどやっぱしmarkdownでかけるとすいすい思いのままに書けてとってもグー！

Kohshi's Blog

2013/12/17

Bloggerでの投稿をmarkdownで書く

0 件のコメント: