HugoのBlowfishテンプレートでコードブロックが水平スクロールできない問題

概要

#

HugoのBlowfishテンプレートでコードブロックに長い行を書いたとき、デフォルトの状態だと横スクロールバーが出なくて見切れた部分が見えない問題があたので対処方法を備忘録として残しておきます。

GithubのIssueにあった以下の対処方法が参考になりました。

https://github.com/nunocoracao/blowfish/issues/990#issuecomment-1885193168

対処方法

#

Blowfishテンプレートのスタイルシートをオーバーライドして、コードブロックにoverflow-x: auto;を追加します。

Blowfiishでは、assets/css/blowfish.cssファイルを作成することでスタイルシートをオーバーライドできます。

https://blowfish.page/ja/docs/advanced-customisation/#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%83%A9%E3%82%A4%E3%83%89

1
2
3
4

/* assets/css/blowfish.css */
.chroma .lntable {
    overflow-x: auto;
}

before:

after: