Cocoon：コード用ブロックを簡素にレイアウト、カスタマイズ

コード用ブロックを簡単にレイアウトしようという企画です。

当サイトの場合、cssは外部ファイルに記入しています。

背景色だけ変更する

以下のcssをコピペ。
6ケタの数字を任意のものに変更すれば、色変更可能。

/*コード用ブロックの背景色*/
.wp-block-code{background-color:#fafafa;}

デフォルトのレイアウトでは、コードが長くて画面内に表示できない場合、横スクロールバーが表示されます。

横スクロールバーをやめて、適当に改行させたいなら以下のcssをコピペすれば可能です。

/*長いコードを折り返す*/
.wp-block-code code {
white-space: pre-wrap;
overflow-wrap: anywhere;}

※本記事は私的備忘録です。自己責任でのご利用をお願いします。