2016/03/11

Blogger を Markdown で書けるようにしたけど、Blockquote が表示されない

marked.js を使用すれば Blogger でも Markdown で記事が書けそうなので、ちょっとやってみました。

参考
BloggerでMarkdown書けるようにした。 - Qiita

ただ、そのままだと Blockquote が上手く処理できず、ちょっと工夫してやる必要があったので書いておきます1。

marked.js の導入

テンプレートの修正方法等は参考リンクがわかりやすいので、そちらを参考にしていただくとして、 以下を </body> タグの直前に書くだけで、導入は完了です。 jQuery を使っていますが、使わなくても大丈夫なはず2。

?
1
2
3
4
5
6
7
8
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js' />
<script type='text/javascript'>
  $('.marked').each(function(i, val) {
    val.innerHTML = marked(val.innerHTML);
  });
</script>

あとは、marked クラス内に Markdown で記述すれば、makred.js でレンダリングされます。

?
1
2
3
4
5
<div class="marked">
# タイトル
- リスト
- リスト
</div>

レンダリング結果は以下

Blockquote が正しくレンダリングされない

しかし、以下のように Blockquote を記述しようとすると、期待しているのとは違う出力になってしまいます。

?
1
2
3
4
<div class="marked">
> 参考 
> これは Blockquote です
</div>

上記のレンダリング結果が以下。 &gt; がそのまま表示されています3。

修正する

これは Blogger が &gt; などのタグを特殊文字として変換してくれるおせっかい機能が原因です。
これを回避するため、先頭の&gt;を置換するコードを追加しました4。

?
1
2
3
4
$('.marked').each(function(i, val) {
  txt = val.innerHTML.replace(/(\n+)&gt;|^&gt;/g, '$1>');
  val.innerHTML = marked(txt);
});

すると、こんな感じになります。


  1. この記事も Markdown で書いているので、「参考」の部分がきちんとレンダリングされていればうまくいっている証拠 ↩
  2. jQuery を使わない方法は参考リンク参照 ↩
  3. その上、行末のスペースが無視されています ↩
  4. このコードを Markdown から直接コピペすると正しく動作しません。
    Syntax Highlighter で処理した時に正しく表示されるようにしています。
    これも特殊文字問題です。 ↩
?

0 件のコメント:

コメントを投稿