WordPressでソースコードを色分けしてくれるプラグイン「SyntaxHighlighter Evolved」を使いこなそう

コードを手軽に色分けして表示してくれる「SyntaxHighlighter」さまざまな言語に対応していて、多機能なため、説明を一読しただけだと理解しづらいところもあります。
前回「SyntaxHighlighterの導入」について書いたので、今回は記述方法を解説しようと思います。

簡単に解説すれば「言語を選択して」「ショートコードでカスタマイズ」という書式になっている。

言語の違いによる記述法解説

前回解説したとおり[php]ここにコードを入れます[/php]と入力すればPHPの構文をハイライトで表示してくれます。

WordPressでの入力例

[php]if (! defined(‘PKWK_OPTIMISE’))[/php]

サンプル

if (! defined('PKWK_OPTIMISE'))

[php]の部分を[css]に変えれば、cssの構文をハイライトで表示してくれる。
多くの言語に対応していて、それぞれ下記のように記述することで対応できる。

使える言語一覧

続いてショートコードの解説

ショートコードを組み合わせることで表示をカスタマイズすることが出来る。
有効無効を選択するコードでは、それぞれ「trueもしくは1」「falseもしくは0」と値を入力します。

よく使うショートコードとサンプルを見ればすぐに感覚がつかめると思います。

firstline — 行番号の出力の際に、最初の行の番号を表す数値

WordPressでの入力例

[php firstline=”10″]if (! defined(‘PKWK_OPTIMISE’))[/php]

サンプル

if (! defined('PKWK_OPTIMISE'))

行番号を表す数字が10になっている。

gutter — 左側に行番号を配置するかどうか

WordPressでの入力例

[php gutter=”false”]if (! defined(‘PKWK_OPTIMISE’))[/php]

サンプル

if (! defined('PKWK_OPTIMISE'))

左側の行番号がなくなっている。「false」の代わりに「0」と入力しても動作する。

highlight — ハイライトさせる行番号のリスト（カンマ区切り）、範囲でも指定可能。例: 2,5-10,12

WordPressでの入力例

[php highlight=”2,4-6″]
define(‘DATA_DIR’, DATA_HOME . ‘wiki/’ ); // Latest wiki texts
define(‘DIFF_DIR’, DATA_HOME . ‘diff/’ ); // Latest diffs
define(‘BACKUP_DIR’, DATA_HOME . ‘backup/’ ); // Backups
define(‘CACHE_DIR’, DATA_HOME . ‘cache/’ ); // Some sort of caches
define(‘UPLOAD_DIR’, DATA_HOME . ‘attach/’ ); // Attached files and logs
define(‘COUNTER_DIR’, DATA_HOME . ‘counter/’ ); // Counter plugin’s counts
define(‘TRACKBACK_DIR’, DATA_HOME . ‘trackback/’); // TrackBack logs
define(‘PLUGIN_DIR’, DATA_HOME . ‘plugin/’ ); // Plugin directory
[/php]

サンプル

define('DATA_DIR',      DATA_HOME . 'wiki/'     ); // Latest wiki texts
define('DIFF_DIR',      DATA_HOME . 'diff/'     ); // Latest diffs
define('BACKUP_DIR',    DATA_HOME . 'backup/'   ); // Backups
define('CACHE_DIR',     DATA_HOME . 'cache/'    ); // Some sort of caches
define('UPLOAD_DIR',    DATA_HOME . 'attach/'   ); // Attached files and logs
define('COUNTER_DIR',   DATA_HOME . 'counter/'  ); // Counter plugin's counts
define('TRACKBACK_DIR', DATA_HOME . 'trackback/'); // TrackBack logs
define('PLUGIN_DIR',    DATA_HOME . 'plugin/'   ); // Plugin directory

「2,4-6」と書くことで2行目と4~6行目をハイライト表示出来る。「,」は半角なので注意。また、範囲だけの指定はできないようで、先頭に単体の数字が来ないと動作しない。範囲だけ指定したい場合は「0,4-6」とする必要がある。
といった具合にショートコード使ってカスタマイズ出来る。
「firstlineで特定の行から始まって、highlightで指定の行をハイライト」といった組み合せた使い方もできる。

使えるショートコード一覧