Markdown のブロッククォートの中にコードブロックの記述したことを書いておきます。
問題
Markdown で code block を記述するのに、 ``` を使う fenced code block で記述しています。
次のように記述します。
```javascript
console.log('fenced code block')
```
これを HTML にすると次のようになります。
console.log('fenced code block')
しかし、 block quote の中に fenced code block を記述すると、 Hugo でサイトを生成したときに code block として表示されませんでした。
block quote の > がそのまま表示されてしまうという…
Visual Studio Code のプレビューだと、しっかり code block が表示されるのですけど。
Hugo の Markdown のレンダリングエンジン
Hugo の Markdown のレンダリングエンジンに原因があるのかな、と思いまして。 まず、レンダリングエンジンが何か調べてみました。
Configure Blackfriday
Blackfriday is Hugo’s built-in Markdown rendering engine.
Hugo は Blackfriday というビルトインのレンダリングエンジンを使っているようです。
Blackfriday の GitHub のソースを見ると次のような内容が見られます。
// indented code block: // // func max(a, b int) int { // if a > b { // return a // } // return b // } if p.codePrefix(data) > 0 { data = data[p.code(out, data):] continue } // fenced code block: // // ｀｀｀ go ← block quote の中で fenced code block の記述をすると崩れるので全角の Back Quotes に修正 // func fact(n int) int { // if n <= 1 { // return n // } // return n * fact(n-1) // } // ｀｀｀ if p.flags&EXTENSION_FENCED_CODE != 0 { if i := p.fencedCodeBlock(out, data, true); i > 0 { data = data[i:] continue } }blackfriday/block.go at master · russross/blackfriday · GitHub
これを見ると、コードブロックには 2 種類あるようです。
- インデントを使う indented code block
```を使う fenced code block
普段は fenced code block を使っていましたので、 indented code block を使ってみたいと思います。
(もうすでに上の引用で indented code block は崩れずに表示されることが証明されているとは思います)
indented code block
Markdown に次のように記述しました。
> code block within block quote.
>
> console.log('indented code block')
これを HTML にすると、次のようになります。
code block within block quote.
console.log('indented code block')
ちゃんと block quote の中に code block があると思います。
インデントをスペース 2 つで記述してみました。
code block within block quote.
console.log(‘indented code block’)
code block になっていないと思います。
インデントをタブで記述してみました。
code block within block quote.
console.log(‘indented code block’)
こちらも code block になっていないと思います。
Visual Studio Code のプレビューでも 4 つのスペースでインデントしないと code block にならないので、そういうものと認識しました。
終わり
``` を使う fenced code block だけ覚えておけば大丈夫だと思っていましたが、甘かったです。
以前の記事でも block quote の中に code block を記述していたのですが、 code block の行だけ > を記述しないで表現していました…
そうすると、 HTML 上は思った通りに表示されていました。
でも、もとの Markdown の記述は気持ち悪い。
よくこんな気持ち悪い状態で放置しておけたものだ、と思ってしまいました。
ちゃんと調べよう。
22 March 2018 追記
次の GitHub の Issues を見ると、 block quote の中の code blocks の 2 行目以降に > をつけていないようです。
Markdown の block quote ってこういうものなのかな？