SyntaxHighlighter Evolved コードを見やすく表示するプラグイン 設定方法と使い方読み終わるまで 2 分

ワードプレス(WordPress)の投稿ページ等にHTMLやCSSのスクリプトやプログラム言語のコードを記載する際に見やすく表示することがきるプラグイン SyntaxHighlighter Evolved を解説します。

SyntaxHighlighter Evolved で実現できること

SyntaxHighlighter Evolved プラグインを入れるとブログサイトに表示するHTMLやCSS、PHPなどのスクリプトコードを見やすくカラフルに表示することができます。

• HTML等のスクリプトやプログラムコード等を見やすく表示してくれる
• コードオプションでカスタマイズできる

SyntaxHighlighter Evolvedプラグインを使って表示させたHTMLコード

↑SyntaxHighlighter Evolvedプラグインを利用すると初期設定ではこのように表示することができます。

SyntaxHighlighter Evolved のインストール方法

SyntaxHighlighter Evolved プラグインをWordPressにインストールする方法を解説します。

WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面

1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
2. 「新規追加」をクリックします
3. 検索ボックスに”SyntaxHighlighter Evolved ”と入力すると下に検索結果が表示されます
4. ”SyntaxHighlighter Evolved ”の「今すぐインストール」ボタンをクリックします

“SyntaxHighlighter Evolved ”のインストール完了画面

↑SyntaxHighlighter Evolved のインストールが完了すると有効化ボタンが表示されるのでクリックします。

“SyntaxHighlighter Evolved “を有効化すると表示される画面

これでSyntaxHighlighter Evolved のインストールと有効化は完了です。

SyntaxHighlighter Evolved の設定と使い方

SyntaxHighlighter Evolvedの設定画面はダッシュボード(管理画面)の設定内にある「SyntaxHighlighter」です。

WordPressのダッシュボード(管理画面)

↑SyntaxHighlighter Evolvedの設定画面はWoredPressのダッシュボード(管理者画面)の設定の中の「SyntaxHighlighter」をクリックします。

SyntaxHighlighter Evolved の設定

SyntaxHighlighter Evolvedの設定画面は日本語になっています。

SyntaxHighlighter Evolvedの設定画面

SyntaxHighlighterのバージョン

一番最初の設定項目にSyntaxHighlighterのバージョン選択項目があります。
バージョン 2.x と バージョン 3.x の違いは次のとおりです。

バージョン 2.x

• マウスカーソルを載せるとコードテキストボックス右上にツールバーが表示されます
• ツールバーからは「ソースを表示」「クリップボードへコピー」「印刷」「SyntaxHighlighterについて(外部リンク)」が操作可能です
• 一般設定項目の「軽い表示モードを使う」をオンにするとツールバーを非表示にできます
• 一般設定項目の「長い行を折り返す」をオンにする長いテキストコードは折り返し表示して、横スクロールバーを非表示にできます

バージョン 3.x

• コードテキストボックス右上のツールバーが表示されません
• 長いテキストコードは折り返して表示されず、横スクロールバーが表示されます
• コードテキストボックスをダブルクリックするとテキストモードになります。同時にクリップボードにコピーできます

テーマ

テキストボックスのデザインや視認性が異なるテーマは全7種類あります。

• Default
• Django
• Eclipse
• Emacs
• Fade to Grey
• Midnight
• RDark
• なし

後項に全テーマの画像を載せています。

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

この設定項目にチェックマークを入れてオンにすると常にすべての言語ファイルを読み込みます。なのでサイトの表示スピードが若干遅くなる可能性があります。

もしビジュアルエディタで他のプラグインを利用している場合の時など、動作が上手くいかない場合はチェックマークを入れて有効にします。

一般

一般はSyntaxHighlighterのバージョン選択項目と連動している項目があります。

• 行番号を表示する
  テキストボックスの左端に番号を表示
• ツールバーを表示する
  バージョン 2.x選択時にツールバーを表示
• 自動リンクを有効にする
  テキストボックス内のURLのリンクを有効にします
• コードボックスの表示を閉じておく
  テキストボックスを閉じた状態にします。表示させる場合はクリックが必要です
• 軽い表示モードを使う
  有効にするとツールバーや行番号を非表示にします
• インデントタブを許容するスマートタブを使う
  テキストボックスでTABを使用します
• 長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)
  長いコードを折り返して表示し、横スクロールバーを非表示にします
• Enable edit mode on double click (v3.x only)：(ダブルクリックで編集モードを有効にする(v3.xのみ))
  テキストボックスをダブルクリックするとテキストもモードになってコーピーや編集できます

追加のCSSのclass名(複数可能)

SyntaxHighlighterのdivタグにClassを指定するときに入力します。

行番号の開始

テキストボックス左端の行番号の最初の行番号を指定できます。

例えば100と入力すると、1行目の行番号は100になります。

行番号の余白

テキストボックス左端の行番号の桁数を次の項目から選択できます。

• なし
• 自動
• 1桁 ※X
• 2桁 ※0X
• 3桁 ※00X
• 4桁 ※000X
• 5桁 ※0000X

タブのサイズ

TABキーでインデントさせたときの空白のサイズを指定できます。

タイトル

タイトルに入力した文字がテキストボックス左上に表示されます。

おすすめの設定

SyntaxHighlighter Evolvedのおすすめの設定を紹介します。
初期設定から変更する必要のある個所だけ記載します。

利用者にコードをコピーしてもらい易いようにツールバーは表示させることをおすすめします。

テーマ毎のデザインの違い

SyntaxHighlighter Evolvedで選択できるテーマ全7種類を載せたので参考にしてください。

Default

SyntaxHighlighter Evolvedのテーマ：「Default」

Django

SyntaxHighlighter Evolvedのテーマ：「Django」

Eclipse

SyntaxHighlighter Evolvedのテーマ：「Eclipse」

Emacs

SyntaxHighlighter Evolvedのテーマ：「Emacs」

Fade to Grey

SyntaxHighlighter Evolvedのテーマ：「Fade to Grey」

Midnight

SyntaxHighlighter Evolvedのテーマ：「Midnight」

RDark

SyntaxHighlighter Evolvedのテーマ：「RDark」

なし

SyntaxHighlighter Evolvedのテーマ：「なし」

Enlighter – Customizable Syntax Highlighteの使い方

SyntaxHighlighter Evolvedを使って、実際に投稿ページでコードを見やすく設定する手順と方法を解説します。

投稿を編集画面

↑投稿記事の編集画面でコードテキストを入力したい箇所でコードを入力し、[[code language=”○○”]と[/code]]で括ります。

全体を[[と]]で括るのがポイントです。

language=”○○”の○○はプログラム言語によって変更してください。ショートコードやCSSのコードもまったく同様の手順でOKです。

下書き保存してプレビューします。

表示を確認

SyntaxHighlighter Evolvedを使って入力したHTMLコード

↑ツールバーはコードボックスにマウスカーソルを当てると表示されます。

左側からソースを表示、クリップボードにコピー、印刷、SyntaxHighlighterについて(外部リンク)になっています。

ソースを表示画面

SyntaxHighlighter Evolvedツールバーの「ソースを表示」ボタンを押して表示させたソース画面

↑ツールバーのソースを表示を押すとソース画面が表示されてテキストをコピーできます。

[[code] と [/code]] を使った場合の表示

コードを[[code] と [/code]]だけで括った場合、つまりプログラム言語を指定しなかった場合はタグの種類毎に文字色が変わらなくなります。
背景色が黒のテーマを利用しているとモノクロになるのでシンプルで視認性が良くなります。

SyntaxHighlighter Evolvedでコードを言語指定しないで[[code] と [/code]]だけで括った時のHTMLコード

↑PC画面ではこのように表示されます。タグごとに色分けしたくない場合は参考にしてください。

まとめ

SyntaxHighlighter Evolvedを利用するとHTMLやCSSのコード、他のプログラム言語のコードを記事に貼り付けて解説するときに、背景色とテキストを視認性の良い色にして見やすくさせることができます。

プラグインのショートコードを投稿ページ本文に貼り付けて紹介や解説する時は、自動変換されなくなるので、必須のプラグインになります。

設定箇所も多くなく、好みのデザインのテーマに変更するだけで、あとは初期設定のままで利用することが可能です。

文字の色をタグの種類毎に変更したくない場合やモノクロのシンプルな表示にしたい場合はコードのオプション指定で言語を指定しなければ実現できます。

このようにコードのオプション指定で好みにカスタマイズできるの点が最大のメリットです。

しして、設定画面が日本語になっていること、プラグイン自体の更新・アップデートも実施されているのでセキュリティ面でも安心して利用できます。

いっぽう、テキストエディタでしか利用できないため導入への敷居が高いことが難点です。
※ビジュアルエディタでコードを編集すると表示が崩れます。

他のコードを見やすくするプラグインはビジュアルエディタ内に出来る専用ボタンを押して利用できるものが多いなか、テキストエディタでコードを入力して利用するのはユニークです。
他のプラグインよりも慣れると逆に使い易いということも言えます。

なので、そもそもテキストエディタに使いにくさを感じる場合は他のビジュアルエディタでボタンを押せば機能するプラグインを使うことをおすすめします。

とにかくデザインや視認性重視で、シンプルな白黒のデザインを使いたい場合は「Urvanov Syntax Highlighter」がイチオシです。

もっと多機能で細かくカスタマイズしたい場合は「Enlighter – Customizable Syntax Highlighter」プラグインをおすすめします↓