SyntaxHighlighter Evolvedの使い方｜記事内でソースコードを美しく表示する方法

今回は、WordPressでソースコードを美しく表示するためのプラグイン「SyntaxHighlighter Evolved」をご紹介します。

わたしのブログではWordPressの解説記事を多く書いており、HTMLソースコードを表示することがよくあります。

しかし、ただコードをそのまま表示すると見づらいことが多いです。

例えば、こんな感じです↓

そこで、WordPressプラグイン「SyntaxHighlighter Evolved」を使ってコードを見やすく、かつ美しく表示する方法をお伝えします。

SyntaxHighlighter Evolvedは、ブログの記事内でソースコードを表示して解説することが多い方には特に役立つプラグインです。

SyntaxHighlighter Evolvedとは？

SyntaxHighlighter Evolvedは、ブログの記事内でソースコードを美しく表示できるプラグインです。

WordPress.org 「SyntaxHighlighter Evolved」プラグインページ

複数のプログラミング言語に対応しており、見やすいシンタックスハイライト（構文強調表示）を実現します。

ブログの記事内でソースコードを表示して解説することが多い方には特に役立つツールです。

SyntaxHighlighter Evolvedを使うときの注意点

SyntaxHighlighter Evolvedを使用する際には、以下の点に注意してください。

特に、他のプラグインやテーマとの相性チェックが重要です。

「SyntaxHighlighter Evolved」を使う前は、お使いのWordPressテーマの公式サイトをチェックしておくことをおすすめします。

参考：プラグインを使う際の注意点

ここから、SyntaxHighlighter Evolvedのインストール方法と使い方について詳しく説明していきます。

SyntaxHighlighter Evolvedをインストールする方法

まず、WordPressのダッシュボードにログインします。

STEP

【プラグイン】にマウスを合わせて【新規追加】をクリックします。

STEP

画面が切り替わるので、右上の【プラグインの検索】に「SyntaxHighlighter Evolved」と入力します。

STEP

検索結果に【SyntaxHighlighter Evolved】が表示されるので、【今すぐインストール】をクリックします。

STEP

インストールが完了すると【有効化】ボタンに変わるので、これをクリックします。

有効化をクリックしないと、導入したプラグインは機能しません。

このように【プラグインを有効化しました】と表示されれば、プラグインのインストールと有効化が完了です。

それでは使ってみましょう。

SyntaxHighlighter Evolvedの設定画面

「SyntaxHighlighter Evolved」の設定画面では、色々と細かな設定ができますが、初期設定のままでも問題なく使用できます。

必要に応じて設定を変更してみてください。

1. 【設定】にマウスを合わせて【SyntaxHighlighter】をクリックします。

2. 設定画面に切り替わりますので、ここでお好みに合わせてカスタマイズしてください。

SyntaxHighlighterの設定画面の説明をします。

SyntaxHighlighterバージョン

SyntaxHighlighterバージョン2.xとバージョン3.xの違いについて説明します。

バージョン 2.x

• 行の折り返し: バージョン2.xでは、長いコード行が自動的に折り返される機能がサポートされています。この機能は、コードの全体を一目で確認できるため、特に長いコードを表示する際に便利です。

バージョン 3.x

• コードのコピー機能: バージョン3では、訪問者がマウスを使って（ドラッグやダブルクリックで）簡単にコードの一部を強調表示し、クリップボードにコピーできる機能が追加されています。この機能により、コードの共有がより簡単になります。
• Flashベースのボタン不要: バージョン3では、Flashベースのコピー用ツールバーが不要になりました。これにより、現代のブラウザやデバイスでの互換性が向上しています。
• 行の折り返しの非対応: バージョン3では、行の折り返し機能がサポートされていません。長いコード行が表示される場合、スクロールが必要になります。

バージョン2.xの操作性がいいのでおすすめです。

テーマ

SyntaxHighlighter Evolvedでは、コードを表示する際のデザインをテーマとして選択できます。

テーマは、コードの見た目を左右する項目です。自分のサイトのデザインや読みやすさに合わせて選ぶと良いでしょう。

デフォルトのテーマデザインはこちら

Djangoのテーマデザインはこちら

テーマは完全に好みの問題です。特にこだわりがなければ、デフォルトのテーマを使用しても問題ありません。

すべてのブラシを読み込む

すべてのブラシを読み込むにチェックを入れると、すべての言語ファイルを常に読み込まれるようになります。

チェックが入っていない場合 (デフォルト設定)は、言語ファイルは必要なときにのみ読み込まれます。

すべての言語ファイルが読み込まれる設定にすると、サイト表示スピードが少し遅くなる可能性があるので注意です。

よく分からない場合は、チェックはしないでください！

SyntaxHighlighter Evolvedの規定の設定

SyntaxHighlighter Evolvedでは、コードの出力ごとに構成を変更することができますが、一般的な規定の設定を指定しておくと、毎回の設定の手間を省くことができます。

以下に、規定の設定項目について説明します。

一部の設定は、使用しているSyntaxHighlighter Evolvedのバージョンに依存します。

一般設定

以下の設定項目を利用して、コードの表示をカスタマイズできます。

バージョンに連動している項目

一部の設定は、使用しているSyntaxHighlighter Evolvedのバージョンに依存します。

• 長い行を折り返す: バージョン2.xでサポートされていますが、バージョン3.xではサポートされていません。
• ダブルクリックで編集モードを有効: バージョン3.xでサポートされています。

詳細設定項目

1. 追加のCSSクラス名
   • コードブロックに適用する追加のCSSクラス名を指定します。複数のクラス名を指定することも可能です。
2. 行番号の開始
   • コードブロックの行番号をどの番号から開始するかを設定します。
   • 例: 行番号を1から始める場合は 1 を設定。
3. 行番号の余白
   • 行番号とコードの間に設定する余白の幅を指定します。
   • 例: 行番号の余白を2に設定。
4. タブのサイズ
   • コード内のTABキーでインデントさせた時のスペースサイズを指定できます。
   • 例: タブのサイズを4に設定。
5. タイトル
   • 各コードブロックの上に表示するタイトルを設定します。タイトルは折りたたまれたコードブロックのクリック可能なテキストとしても使用されます。（例: コード例）

SyntaxHighlighter Evolvedの使い方

SyntaxHighlighter Evolvedの使い方は簡単です。

記事を投稿するときに、紹介したいコード部分をショートコードで囲むだけです。

例えば、以下のようにします。

これで、投稿すると以下のように表示されます。

さらに、特定の行をハイライトしたい場合は、次のようにショートコードを使います。

これで投稿するとこうなります。

このように、見出しが表示され、指定した行がハイライトされます。

SyntaxHighlighter Evolvedの使い方のまとめ

今回は、WordPressでソースコードを美しく表示するためのプラグイン「SyntaxHighlighter Evolved」をご紹介しました。

「SyntaxHighlighter Evolved」は、記事内でソースコードを美しく見やすく表示できる優れたプラグインです。

ブログの記事内にソースコードを表示して解説することが多い方には非常に便利です。

普段はコードを扱わない方でも、知識として知っておいて損はないプラグインだと思います。

ぜひお試しください！

無料メールマガジンでアフィリエイトの基礎知識を公開中！

ブログアフィリエイトの基礎知識を分かりやすく丁寧に丸っと公開中！！

メルマガに登録すると、シークレットサイト「Escape from Zero」にご招待します。このシークレットサイトでは、ブログアフィリエイトの基礎を順序立てて解説しております。
メルマガの登録は無料！配信解除はいつでもOK！ 登録はこちら↓

WordPress開設マニュアルをもらう