2016/03/11

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

[marked.js](https://github.com/chjj/marked)
を使用すれば Blogger でも Markdown で記事が書けそうなので、ちょっとやってみました。

> 参考  
> [BloggerでMarkdown書けるようにした。 - Qiita](http://qiita.com/her0m31/items/1804bdc251a647e0e9a8)

ただ、そのままだと Blockquote が上手く処理できず、ちょっと工夫してやる必要があったので書いておきますこの記事も Markdown で書いているので、「参考」の部分がきちんとレンダリングされていればうまくいっている証拠

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

あとは、`marked` クラス内に Markdown で記述すれば、makred.js でレンダリングされます。
```xml
# タイトル - リスト - リスト
``` レンダリング結果は以下
### Blockquote が正しくレンダリングされない しかし、以下のように Blockquote を記述しようとすると、期待しているのとは違う出力になってしまいます。 ```xml
> 参考 > これは Blockquote です
``` 上記のレンダリング結果が以下。 `>` がそのまま表示されていますその上、行末のスペースが無視されています
### 修正する これは Blogger が `>` などのタグを[特殊文字](http://pst.co.jp/powersoft/html/index.php?f=3401)として変換してくれる~~おせっかい~~機能が原因です。 これを回避するため、先頭の`>`を置換するコードを追加しましたこのコードを Markdown から直接コピペすると正しく動作しません。
Syntax Highlighter で処理した時に正しく表示されるようにしています。
これも特殊文字問題です。
。 ```javascript `highlight: 2; $('.marked').each(function(i, val) { txt = val.innerHTML.replace(/(\n+)&gt;|^&gt;/g, '$1>'); val.innerHTML = marked(txt); }); ``` すると、こんな感じになります。

0 件のコメント: