block quote の中の fenced code block が崩れるので調べました

広告

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.

Configure Hugo | Hugo

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 ってこういうものなのかな?

Multiple fenced code blocks inside a “>”-prefixed blockquote rendered incorrectly · Issue #122 · russross/blackfriday · GitHub

広告
広告