WordPressのエディタがブロックスタイルになってから、ココログブックの記事でのコードの書き方をどうしようか検討していた。むかしはプラグインを使ってきれいな表示をしていたが、WordPressやPHPのアップデートやエディタの仕様変更等でプラグインが使えなくなったり、アップデートが遅れたりしたこともあり、プラグインをやめたところ、変なショートコードや文字が残ってしまい、不便きまわりない。

そこで、今後は、プラグインを使わずにGUTEMBERGに装備のコードブロックを使用することにした。ただ、それだと白地に文字だけのシンプルな表示になって、いまいちコードらしくない。

そこで、コードコードブロックの部分だけのスタイルを変更するCSSの登場。黒字に白文字で表現してくれて、どれがコードか一目でわかる。

/* コードブロック全体のスタイル */
pre, 
pre code {
    background-color: #1e1e1e; /* 背景色 */
    color: #d4d4d4;            /* 文字色 */
    white-space: pre;          /* 自動折り返しを禁止 */
    word-break: normal;        /* 単語の途中での強制改行を無効化 */
}

pre {
    padding: 20px;             /* 内側の余白 */
    border-radius: 8px;        /* 角を少し丸くする */
    overflow-x: auto;          /* 長いコードは横スクロールさせる */
    font-family: 'Consolas', 'Courier New', Courier, monospace; /* コード用フォント */
    font-size: 14px;           /* 読みやすい文字サイズ */
    line-height: 1.6;          /* 行間を広げて見やすく */
    border: 1px solid #3c3c3c; /* 枠線を少し明るいグレーにして引き締める */
}

【使い方】

Gutenbergのコードブロックを使用して、コードを記載して使用するだけ。

デフォルトのコードブロックの表示：

スタイルを黒字に白文字にした時の表示：