WordPressブログでコードを強調表示するプラグイン「SyntaxHighlighter Evolved」

  • このエントリーをはてなブックマークに追加

WordPressでブログを書いていると、HTMLやCSSなどのコードを記載して説明などすることがあります。そのままブログ感覚でコードを書くと、コードに反応して正しく記載されなかったりしますよね。

そんな時にコードを強調表示して、記載したコードをきれいに表示してくれるプラグイン「SyntaxHighlighter Evolved」をご紹介します。

下図はWordPressブログ内で「SyntaxHighlighter Evolved」を実際に使用したイメージです。

「SyntaxHighlighter Evolved」を実際に使用したイメージ画像

おそらくブログでよく見ると思います。背景が黒でコードが記載されているやつです。プラグイン「SyntaxHighlighter Evolved」は細かい設定も可能ですし、シンプルで使いやすいです。

カラーも8種類あるので、コードの表示デザインを、ブログに合わせてカスタマイズすることが可能です。

ブログに上図のようなデザインでコードを記載したいという方は、「SyntaxHighlighter Evolved」をインストールして設定してみましょう。

コアラ
コードがかなり見やすくなるぞ

 

1.SyntaxHighlighter Evolvedをインストール

WordPressのトップページから、「プラグイン → 新規追加」をクリックします。

WordPressのトップページから、「プラグイン → 新規追加」をクリックする

右上の検索バーに「SyntaxHighlighter Evolved」を入力して検索すると、「SyntaxHighlighter Evolved」が表示されるので、「今すぐインストール」をクリックします。

「SyntaxHighlighter Evolved」を検索して今すぐインストールをクリックする

これでインストール完了です。次は設定をしていきましょう。

2.設定方法

「SyntaxHighlighter Evolved」では、「コードボックスのカラー」や「行番号の表示」「折り返しの有無」などを設定することが可能です。早速設定していきましょう。

WordPressの左側のメニューから「プラグイン → インストール済みプラグイン」をクリックします。

WordPressの左側のメニューから「プラグイン → インストール済みプラグイン」をクリックする

インストール済のプラグインが並んでいますので「SyntaxHighlighter Evolved」を探して、「設定」をクリックします。

インストール済のプラグイン一覧の中にある「SyntaxHighlighter Evolved」

下図のような「SyntaxHighlighter Evolved」の設定画面が開きます。

「SyntaxHighlighter Evolved」の設定画面

ここで設定していきます。今回は基本的な設定の「SyntaxHighlighterのバージョン」「テーマ」「既定の設定 / 一般」「既定の設定 / 他」の説明をしていきます。

2-1.SyntaxHighlighterのバージョン

「SyntaxHighlighterのバージョン」では「バージョン3」か「バージョン2」を選択します。どちらもちゃんとコードを表示してくれるのですが、コードが長くなった場合に表示方法やツールバーの表示に少し違いがあります。

バージョン3

「バージョン3」はコードが長くなった場合、下図のように端で折り返さずに横スクロールバーが表示されます。

「バージョン3」で横スクロールバーが付いたコード表示

その他には、コード内でダブルクリックするとコード全体が選択されるので、コピペするときには便利です。もちろんコピーしたい部分だけを選択することも簡単にできます。

バージョン2

「バージョン2」の場合は、コードが長くなった場合、下図のように端で折り返されて表示されます。

「バージョン2」で端で折り返されているコード表示

横スクロールバーが表示されないので、スクロールしなくても全体を見ることができます。設定で折り返しなしにもできます。

「バージョン2」の場合はダブルクリックしてもコード全体は選択されません。そのかわりマウスポインタをコードの上に重ねると、下図のようなツールボックスが表示されます。

「バージョン2」で表示されるツールボックス

この左の<>のようなマークをクリックすると、ポップアップ画面でコードが表示されます。

あとは好みの問題なので、どちらでもお好きな方を選んでください。個人的には「バージョン3」の方が良いかな思います。

最近はスマートフォン使用率が増加してきているので、レスポンシブ対応のサイトが増えてきているというか、レスポンシブ対応で当たり前くらいになっているからです。

スマートフォンでコードを見た場合、端で折り返されていると画面がコードだらけで訳が分からなくなると思います。見ずらいです。

横スクロールバーなら、スライドすれば見れますから、無駄に縦に長いコード表示になりません。パソコンでもスマートフォンでも見やすいブログになるはずです。

2-2.テーマ

「テーマ」はコードを表示する部分の、背景色やカラーを変更することができます。テーマは下記の8種類から選びます。

  • デフォルト
  • Django
  • Eclipse
  • Emacs
  • Fade to Grey
  • Midnight
  • Rdark
  • なし

それぞれどんなカラーなのか比べてみましょう

「SyntaxHighlighter Evolved」で設定できるカラー8種類のイメージ

結構微妙な違いな部分もありますが、カラーをこれだけ選べるのはうれしいです。自分のブログによって合うカラー合わないカラーがありますからね。

コアラ
自分のブログに合わせて選んでくれよな

 

2-3.すべてのブラシを読み込む

「preタグ」を直接使用したい時にチェックを入れるようです。「preタグ」はコードやテキスト等をそのまま表示するタグです。スペースや改行もそのまま表示されます。

そもそもこのプラグイン「SyntaxHighlighter Evolved」で、「html」「css」「php」のコードをそのままキレイに表示できるので、「pre」を使用することは基本ないはずですので、チェックを入れる必要はないと思います。

 

2-4.既定の設定 / 一般

「規定の設定/一般」では、「行番号の表示」や「コードボックスを最初の開閉」などをチェックボックスにチェックをつけることで設定可能な部分です。

行番号を表示する

コードボックスの左に行番号を表示するか表示しないかを選択します。下図のようなイメージになります。

行番号表示した場合としない場合の比較イメージ

ツールバーを表示する

チェックを入れると、「バージョン2」の場合、右上にツールボックスが表示されるようになります。

「バージョン2」で表示されるツールボックス

「バージョン3」の場合コードボックスの右上に「Syについて」というリンクが表示されるようになります。

「バージョン3」で表示される「Syについて」のリンク

クリックすると「SyntaxHighlighterのバージョン」や「サイトへのリンク」がポップアップで表示されます。

「バージョン2」は好みでチェック入れてください。「バージョン3」の場合は、正直チェック入れないくて良いと思います。

自動リンクを有効にする

チェックを入れると、コードに入力してあるURLに自動でリンクが付きます。つまりコード内のURLをクリックするとリンク先に飛びます。

チェックを外すと、リンクはされませんので、URLをクリックしてもリンク先には飛ばなくなります。

コードボックスの表示を閉じておく

初期状態では最初からコードボックスが開いていますが、チェックを入れるとコードボックスが閉じて、クリックすると表示されるようになります。下図のようなイメージです。

実際にコードボックスを非表示にした場合のイメージ画像

コードを見るために「クリックをする」という、ユーザーがおこなうアクションがひとつ増えます。そのかわりに見る必要のないコードが視界に入ることもなく、ブログ自体もスッキリとした表示になります。

軽い表示モードを使う

チェックを入れると、行番号とツールバーが削除されて表示されます。見た目的にはそれだけの変化しかないです。

インデントタブを許容するスマートタブを使う

これはコードを字下げするためのインデント(余白)を「SyntaxHighlighter Evolved」のコードボックスでも使えるってことなんでしょうか?

変更していろいろ試してみましたけど、何も変化がなかったので良く分かりません。チェック入れなくて良いと思います。

長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)

こちらは「バージョン2」のみに有効な項目です。チェックを入れるとコードが長くなったときに端で折り返し表示をします。

チェックをはずすと、端で折り返しされずに、横スクロールバーが表示されます。

2-5.既定の設定 / 他

「規定の設定/一般」以外の設定部分です。少し細かい部分の設定になりますので、普通に使う分にはこの部分の設定は変更しなくても大丈夫です。

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

ボックスのdivタグにclassを指定できます。試しに「test」というcssを追加してみると下記のようなイメージです。

追加cssを実際にした場合実際にcssが入る場所イメージ

一応一番上の階層に追加されています。何か微調整するときなどにcssを追加するんでしょうか。とりあえずやっとこブログではcss追加はせずに使っています。

行番号の開始

コードボックスの左側の行番号の開始番号を設定します。通常は1からはじまり「1 2 3 4 …」といった感じですが、下記のように設定した番号からはじまります。

  • 「1」に設定した場合は → 「1 2 3 4 …」
  • 「3」に設定した場合は → 「3 4 5 6 …」
  • 「7」に設定した場合は → 「7 8 9 10 …」

実際に「3」に設定した場合は下図のようなイメージになります。

行番号の開始を「3」にした場合の表示イメージ

行番号の余白

行番号の桁数を指定できます。コードボックスの左側の番号が下記のように変化します。

  • 「なし」に設定した場合 → 「1」
  • 「2」に設定した場合 → 「01」
  • 「4」に設定した場合 → 「0001」

実際に「4」に設定した場合は、下図のようなイメージになります。

行番号の余白を実際に「4」にした時の表示イメージ

タブのサイズ

コードを入力するとき、余白をつくって段階表示にするのが普通なのですが、その白の長さを指定できます。

初期設定で「4」に設定されていると思いますが、見やすいです。特にこだわりがなければ変更しなくても大丈夫です。

タイトル

タイトルを自由に入力できます。タイトルはコードボックスの左上部に表示されます。例としてタイトルに「コード」と入れると下図のようなイメージになります。

タイトルに「コード」と入れた場合の実際の表示イメージ

3.使用方法

使用方法は簡単です。例えばcssの場合は、強調表示したいコードを

[css][/css]

で囲んで記載するだけです。全て半角英数字で入力してください。上記のは表示させるためにカッコだけ全角で入力しています。

使用できるコードの種類は下記3種類です。

  • html
  • css
  • php

これをブログを記載する画面で、下図のように入力します。

「SyntaxHighlighter Evolved」で実際にブログ入力画面でcssを記載しているイメージ

入力した画面を実際にブログで見てみると下図ように表示されるわけです。

「SyntaxHighlighter Evolved」で入力したcssコードの表示イメージ

かなり簡単ですよね。「html」や「php」の場合は、上図のブログ記載画面で「css」の部分を「html」や「php」に変更すればよいだけです。これでコードの説明をする時に見やすいコード表示にすることができるはずです。

実際にこのブログの文章中に打ち込むと、下記のように表示されます。


body.color01 #side .share-list-wrap .post-share-list1 li.post-share-facebook a:hover,
body.color01 #side .share-list-wrap .post-share-list2 li.post-share-facebook a:hover,
body.color01 #side .share-list-wrap .post-share-list3 li.post-share-facebook a:hover,
body.color01 #side .share-list-wrap .post-share-list4 li.post-share-facebook a:hover {
color: #305097;
}

コアラ
めっちゃ簡単だろ?

4.まとめ

以上が「WordPressブログでコードを強調表示するプラグイン「SyntaxHighlighter Evolved」」です。

ブログでコードを表示して説明することって結構あると思いますので、せっかくコードを表示するなら、通常の文章とは違うデザインで表示したほうが、コードはもちろんブログ全体としても見やすくなります。

コードを表示することがある場合はぜひ「SyntaxHighlighter Evolved」をインストールして設定してみてください。

 

その他のWordPressカスタマイズは、

【hタグ】 【ヘッダー・メニュー】 【サイドバー】 【プラグイン】 【URL変更】 【その他】

上記の記事を参考にしてください。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*