Simplicityでソースコードをハイライト表示・スタイルの適用【CSS】

技術ブログなどでサンプルプログラムのソースコードをハイライト表示（反転したり色分けして強調表示）させて見やすく掲載しているものをよく見かけます。

Simplicityのテーマを利用している場合はハイライト表示を簡単に設定することができます。

ハイライト表示の設定

WordPressの管理画面から「外観」→「カスタマイズ」をクリックします。

「ソースコード」をクリックします。

「ソースコードをハイライト表示」にチェックを入れ、「ハイライトスタイル」を一覧から選びます。「ハイライトするCSSセレクタ」は通常は変更する必要はありません。

以上の設定で、preタグ（<pre>～</pre>）で囲った部分がハイライト表示されます。

別の要素をハイライト表示したい場合は「ハイライトするCSSセレクタ」を変更してください。

ハイライト表示させたpre要素にスタイルを適用して装飾するには、スタイルシートを編集します。

WordPressの管理画面から「外観」→「テーマエディター」をクリックします。

スタイルシート（style.css）に以下のように記述します。セレクタは「ハイライトするCSSセレクタ」に入力したもの（デフォルトでは「.entry-content pre」）を指定します。

.entry-content pre {
    font-size: 90%;  /* 文字サイズを小さめに */
    padding: 1em;  /* 余白を設定 */
}

編集が終わったら「ファイル更新」をクリックしてスタイルシートを保存します。
プロパティや値は任意で変更・追加し、お好みのスタイルを適用させてみてください。