WordPressのテーマ「Diver」を使用してWordPressサイトをカスタマイズします。本稿では、ソースコードを美しく表示できるようにします。
記事の目次
プラグイン「SyntaxHighlighter Evolved」をインストールする！
Diverでは、ソースコードを美しく表示するなどの個別の事情には対応していません。本サイトは、ICT系のサイトでどうしても必要なので、プラグイン「SyntaxHighlighter Evolved」を使用しています。プラグイン「SyntaxHighlighter Evolved」をインストールして、有効化しましょう。
「SyntaxHighlighter Evolved」の設定を行う！
プラグイン「SyntaxHighlighter Evolved」設定画面から、設定を行います。本サイトで、設定を変更をしているのは、以下のみです。
- テーマ：Midnight
「SyntaxHighlighter Evolved」の使用方法
「SyntaxHighlighter Evolved」の使用方法ですが、美しく表示したい表示コードを指定のタグ（［code］［/code］） で囲むのみです。すると以下のように表示されます。
test1 test2
※その他、ソースコードの種類を指定して、キーワードに色をつけたり、特定の行をハイライトしたりすることができます。
おわりに
表示例で気づかれたかもしれませんが、文章の下にソースコードを表示した時に、若干間隔が空きすぎる気がします。今後の課題として調整できないか、探ってみたいと思います。
関連記事
