Contents

HugoのLoveItテーマでSynatx Highlightにスクロールバーを適用する方法

Tuuutti included in Hugo

2024-02-04 325 words 1 minutes

Contents

手順

CSSにスクロールバーの設定を追加
assets\css\_partial\_single\_code.scss 内の .chroma クラスに以下設定を追加 (設定する数値はお好みで)
- font-size：.chroma 内のテキストのフォントサイズ
- max-height：.chroma の高さ制限 (高さ超過時、縦方向にスクロールバーが表示される)
- overflow-x：scroll を指定し、横方向のスクロールバーを表示
- overflow-y：scroll を指定し、縦方向のスクロールバーを表示
- padding：.chroma 内のコンテンツと .chroma 要素の境界に余白追を追加
```
.chroma {
    font-size: 13px;
    max-height: 600px;
    overflow-x: scroll;
    overflow-y: scroll;
    padding: 2px 5px;
}
```

Chroma SyntaxHighlightの有効化
hugo.toml ファイルに以下設定を追加
```
pygmentsUseClasses = true
pygmentsCodefences = true
```

参考情報