SyntaxHighlighter Evolved コードを見やすく表示するプラグイン設定方法と使い方

この記事を読むのに必要な時間は1分です。

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

この記事を見ることで得られるメリット

SyntaxHighlighter Evolved の使い方と詳細な設定方法がわかります

SyntaxHighlighter Evolved で実現できること

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

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

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

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

SyntaxHighlighter Evolved はビジュアルエディタでは利用できません。テキストエディタでコードを入力する必要があります

SyntaxHighlighter Evolved のインストール方法

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

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

WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
「新規追加」をクリックします
検索ボックスに”SyntaxHighlighter Evolved ”と入力すると下に検索結果が表示されます
”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

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

横スクロールバーが表示されると操作性が悪くなるので、おすすめはバージョン 2.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で選択できるテーマ全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を使って、実際に投稿ページでコードを見やすく設定する手順と方法を解説します。

他のコードを見やすくプラグインと大きく違うところは、SyntaxHighlighter Evolvedプラグイン用のボタンがどこにも存在しておらず、テキストエディタでコードを直接入力する必要がある点です

投稿を編集画面

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

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

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

プログラム言語が不明な場合や、シンプルにテキストをホワイト一色で表示させたい場合はlanguage=”○○”を記載しないで、[[code] と [/code]] だけでコードを括れば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」プラグインをおすすめします↓

コードを見やすく表示するプラグイン関連記事

Enlighter – Customizable Syntax Highlighter コードを見やすく表示するプラグイン設定方法と使い方

Urvanov Syntax Highlighter コードを見やすく表示するプラグイン設定方法と使い方

CodeMirror Blocks コードを見やすく表示するプラグイン設定方法と使い方

Code Prettify コードを見やすく表示するプラグイン設定方法と使い方

prism.js コードを見やすく表示するシンタックスハイライター設定方法と使い方

SyntaxHighlighter Evolved コードを見やすく表示するプラグイン設定方法と使い方

SyntaxHighlighter Evolved で実現できること

SyntaxHighlighter Evolved のインストール方法