こうした技術系のブログの場合、ソースコードを記述する機会がよくあります。
そんなとき、ただコードをベタッとそのまま貼るのではなくて、エディターで編集している時のようにハイライト表示してくれると見やすくて便利ですよね。
ソースのハイライト表示については、各所で色々なライブラリーが公開されてますが、それをWordPressで使いやすいようにプラグイン化したものも数多くあります。
僕は以前、『WP-Syntax』というプラグインを使っていたのですが、デザインや機能面でもう少し充実したものはないかと探してみました。
そこで出会ったのがこのプラグイン。
WordPress › SyntaxHighlighter Evolved « WordPress Plugins
SyntaxHighlighter Evolved はここがいい
いくつか試した中で、評価も高く、アップデートもこまめに行われているこちらのプラグインが、僕にとってはベストでした。
カラー設定が変更できる
- Django
- Eclipse
- Emacs
- Fade to Grey
- Midnight
- RDark
と、デフォルトを始め7個のカラースキームが用意されていて、今回僕がやりたかった黒背景＋白フォントのデザインにもできます。
指定行のハイライトができる
特定の行をハイライト表示させたり、行番号を任意の数から始めたりと、色々な指定をパラメータで操作することができます。
管理画面でプレビューできる
他にも、こんな感じで色々な設定項目があります。
lang または language — ハイライトするコードの言語。パラメータ指定だけでなく[php]code[/php]のように言語をタグとして記述できます。有効なタグのリストは こちらをクリック (“aliases”の下を参照)
autolinks — 自動リンクの有効・無効
classname — コードボックスに追加するCSSのclass
collapse — コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
firstline — 行番号の出力の際に、最初の行の番号を表す数値
gutter — 左側に行番号を配置するかどうか
highlight — ハイライトさせる行番号のリスト（カンマ区切り）、範囲でも指定可能。例: 2,5-10,12
htmlscript — HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
light — 行番号やツールバーを無効にする軽い表示モードのオン・オフ
padlinenumbers — 行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)
title （v3のみ） — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
toolbar — ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
wraplines (v2のみ) — 折り返しの有効・無効
ショートコードもPREも使える
このプラグインの使い方は、
[php] echo 'Hello world!!'; [/php]
もしくは
[code lang="php"] echo 'Hello world!!'; [/code]
といった具合で、ショートコードで囲む、という簡単なものですが、デフォルト挙動の
echo 'Hello world!!';という、HTML表記にも対応しています。プラグイン乗り換えの互換性とか考える人にもいいんじゃないでしょうか。
（注：preを使うときには、設定項目の『常にすべての言語ファイルを読込みます』のチェックをオンにします。その分ちょっと重くなるかもしれません。パフォーマンス的にはショートコードがおすすめです。）使い方
- まずは/wp-content/pluguins/ディレクトリに解凍して、「プラグイン」から有効化します。
- 「設定」の項目で「SyntaxHighliter」が登場するので、そこでデザインを選択、プレビューで確認します。
- ［言語名］［言語名/］、もしくは＜pre class=”brush:言語名”>＜/pre＞の形式でコードを記述します。
以上。簡単ですね。
ダウンロードはこちらから。
WordPress › SyntaxHighlighter Evolved « WordPress Plugins