コードブロックに水平スクロールバーを表示する

Drupal

新しいテーマ Byte はコードブロックに水平スクロールバーが表示されないため、横画面幅を超えるコードブロックがあるとレイアウトが大きく崩れた。
以前にも同じようなテーマがあったけれど、自由にカスタマイズしてね、ということなのかなぁ。

今回はモジュール Asset Injector を使ってカスタム CSS を追加することで対応した。

追加した CSS はこちら。

/* コードブロックの外枠を制御 */
pre {
  background-color: #eaf4fc; /* 背景色（任意） */
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto; /* 横方向に溢れた場合にスクロールバーを表示 */
  white-space: pre; /* 改行を禁止し、そのまま表示 */
  word-wrap: normal; /* 単語の途中での改行を防止 */
}

code {
  display: block; /* code要素をブロック化してスクロールを安定させる */
  width: 100%;
}

 

これでレイアウト崩れは無くなった。
最初はサブテーマを作って CSS を追加することも考えたけれどヘッダーとフッターがうまく表示されなかったから一旦諦めて、怪しい CSS や JS を追加しなければ脆弱性とはならないだろうということでモジュールで対応することにした。

以上。

関連記事