WordPress + Cocoonでコード ブロック内のスクロールを有効化する。

この度私はレンタル サーヴァー上に独自ドメインでブログを運営する事となり、CMS(Contents Management System)としてオープン ソースの “WordPress” とそのブログ用テーマとして優秀な “Cocoon” を利用させて頂いております。

ブログのデザインはCocoonの子テーマの内蔵スキンのCOLORS (ブルー)にテーマ エディターにてCSS(Cascading Style Sheet)のコードを追加してカスタマイズしてあります。
CSSの設定が元と重複しているものには !important を追加して優先設定にして有効化させております。

ブログ記事内に何らかのプログラムなどのコードを掲載したい場合、記事編集画面でコード ブロックを挿入し、そこにコードを記入する事となります。
コード ブロックは highlight.js によりコードを綺麗に整えてハイライト表示してくれます。
ですが初期設定では横に長い行は折り返しされる設定となっています。
これをスクロールされる設定に変更致しましたのでやり方を記載して置きます。

まずWordPressの管理画面から、 “外観” -> “テーマエディター” -> “スタイルシート” -> “Cocoon Child” を選択します。
そしてCSSの下の方に以下のコードを追加します。

.wp-block-code code{
	white-space: pre !important;
}

そして “ファイルを更新” ボタンを押せばコード ブロック内がスクロール対応されます。
たったこれだけで大丈夫です。

# sample code
	layersList.append(
		torch.nn.Conv2d(in_channels=3 * 4 * 4, out_channels=nChannels, kernel_size=(3, 3), stride=1, padding=1, dilation=1, groups=1, bias=True, padding_mode='replicate'))

	layersList.append(Swish())

	layersList.append(
		torch.nn.GroupNorm(num_groups=int(nChannels / 8), num_channels=nChannels, eps=1e-05, affine=True))

	layersList.append(Swish())

サンプルとして行が長目のコードを挿入してみました。