ソースコードを整形して表示する！（SyntaxHighlighter Evolved）

WordPressのテーマ「Diver」を使用してWordPressサイトをカスタマイズします。本稿では、ソースコードを美しく表示できるようにします。

プラグイン「SyntaxHighlighter Evolved」をインストールする！

Diverでは、ソースコードを美しく表示するなどの個別の事情には対応していません。本サイトは、ICT系のサイトでどうしても必要なので、プラグイン「SyntaxHighlighter Evolved」を使用しています。プラグイン「SyntaxHighlighter Evolved」をインストールして、有効化しましょう。

「SyntaxHighlighter Evolved」の設定を行う！

プラグイン「SyntaxHighlighter Evolved」設定画面から、設定を行います。本サイトで、設定を変更をしているのは、以下のみです。

• テーマ：Midnight

「SyntaxHighlighter Evolved」の使用方法

「SyntaxHighlighter Evolved」の使用方法ですが、美しく表示したい表示コードを指定のタグ（［code］［/code］） で囲むのみです。すると以下のように表示されます。

test1
test2

※その他、ソースコードの種類を指定して、キーワードに色をつけたり、特定の行をハイライトしたりすることができます。

おわりに

表示例で気づかれたかもしれませんが、文章の下にソースコードを表示した時に、若干間隔が空きすぎる気がします。今後の課題として調整できないか、探ってみたいと思います。

関連記事