ソースコードをハイライト表示するプラグイン:WP-CodeBox

投稿日: 2008年9月25日 | カテゴリ:『ワードプレス』>プラグイン

ソースコードをハイライト表示するプラグイン:WP-CodeBox
何らかのプログラムを記事で紹介する必要がある場合、ソースコードをそのまま、かつハイライト化(強調、色分け)して表示してくれるプログラムは必要不可欠です。今回は、WordpressのプラグインWP-CodeBoxのインストール、設定法、及び使用法を紹介いたします。
[追記](2009年12月28日)
PHP7にバージョンアップして、ereg系関数が使えなくなりました。このプラグインにもeregi関数が3個所使用されていて、これを修正しないとこのプラグインを使用している記事はうまく表示されません。/wp-codebox/main.phpファイルの最終部分(199行から204行目当たり)を以下のように修正してください。

function wp_codebox_is_windowsie()
{
  $agent = $_SERVER['HTTP_USER_AGENT'];
  return eregi("win", $agent) && eregi("msie",$agent) && !eregi("opera",$agent);
}

          ↓

function wp_codebox_is_windowsie()
{
  $agent = $_SERVER['HTTP_USER_AGENT'];
  return preg_match("/win/i", $agent) && preg_match("/msie/i",$agent) && !preg_match("/opera/i",$agent);
}

特徴
  1. 100を越える豊富なプログラム言語をサポートしている。
  2. キーワード、変数、コメント、記号などの多くのコードをハイライト化できる。
  3. 機能バーによってソースコードを別ウィンドウで表示したり、保存したり、クリップボードにコピーすることができる。
1. インストール

以下のサイトから最新のバージョンをダウンロードし、必要に応じて解凍し、フォルダーごと/wp-content/plugins/ディレクトリにアップロードします。現在の最新バージョンは、1.3.1です。以下の説明はこのバージョンを基に行います。
WP-CodeBoxのDownload
adminでログインし、「プラグイン」でCodeboxの「使用する」をクリックしこのプログラムを有効にします。
「設定」-「WP-CodeBox」を選択し各種設定を行います。

2. デフォルト・オプションの設定

次の図はオプション設定の画面です。

  1. 「Hide the Function Bar」のチェックボックスにチェックを入れるとトップの機能バーが表示されなくなります。デフォルトは表示です。
  2. 「Default show Line Number」にチェックを入れるとデフォルトでライン番号が1から表示されます。<pre line=”n”>と指定すればラインナンバーは表示されません。
  3. 「Auto-Caps/Nocaps」を使用すれば、文字がスタイル化されていれば自動的に大文字にするか、小文字にするかの選択ができます。プルダウンメニューのCAPS_UPPERを選択すれば大文字に、CAPS_LOWERを選択すれば小文字で表示されます。デフォルトはCAPS_NO_CHANGE(変更なし)です。
  4. 「Collapse Codebox」をチェックすると、タグcolla="+/-" の切り替えでCodeBoxをデフォルトで表示する(+)か表示しない(-)かを指定できます。「-」の場合でも機能ボックスの矢印操作でCodeBoxを事後的に表示させることができます。
  5. 「All URLs for Keywords Activated」にチェックを入れるとAPI 文書へのリンクの張ってあるキーワードのリンクが有効になります。
  6. 「Strict Mode」にチェックを入れると、言語の開始・終了指定タグ(例えば、PHPの場合<?php… ?>)内部以外の文字列はハイライト表示されません。逆にチェックを入れたまま、デリミッターがないと全て非ハイライト表示になります。
  7. 「Tab Width (in spaces)」では1つのタブを何個のスペースに変換するかを指定します。
  8. 設定がすんだら「Update Options」ボタンをクリックして変更を保存します。
3. CSSファイルにおける設定

このほかの設定は、wp-codebox/css/codebox.cssとgeshi.phpファイルで行います。

CodeBoxのレイアウトとフォントの設定
本体のレイアウトやフォントの指定(font-familyを除く)は、cssファイルの最後にあるクラス「.wp_codebox pre」の部分で調整します。ここに記述した内容はそれ以前の設定を上書きします。

.wp_codebox pre {
  border:none;
  background:none;
  margin:0;
  /* padding:0; */
  width:auto;
  float:none;
  clear:none;
  overflow:auto;
  /* font-size:12px;
  line-height:1.333; */
  padding:5px; 
  font-size:14px;
  font-family: arial, "Times New Roman"; 
  line-height:1.6em; 
  color:#000; 
}
/* ラインナンバー枠の設定 */
.line_numbers pre {
  padding-left:5px;
}

12行目:文字列と外枠の間の間隔を指定します。
13行目:文字の大きさを指定します。ラインナンバーと本体の文字の大きさに反映されます。
14行目:フォントファミリーを設定します。この設定はラインナンバーだけに反映されます。
15行目:文字列の行間を指定します。
16行目:文字のデフォルト(ハイライト化されない文字)のカラーを指定します。
20行目:ラインナンバーの左からの位置です。

機能バーの設定
cssファイルの.wp_codebox_msgheaderの項で設定します(…略)。デフォルトで十分だと思います。

CodeBoxのフォント・ファミリーの指定
wp-codebox/geshi/geshi.phpの430行目辺りに次のような記述があります。このfont-familyを指定するとCodeBox内の文字列の種類を指定することができます。デフォルトはmonospaceです。

/**
* The overall style for this code block
* @var string
*/
var $overall_style = 'font-family:tahoma, monospace;'; 
4. geshiファイルの変更

各コードの色分や強調表示を自分の好みに変更します。
php.phpファイルを例にとって説明します。
各コードの配列の指定は、51行目辺りから次のように設定されています。この配列に自分の希望のコードを追加することができます。

$language_data = array (
    'LANG_NAME' => 'PHP',
    'COMMENT_SINGLE' => array(1 => '//', 2 => '#'),
    'COMMENT_MULTI' => array('/*' => '*/'),
    'CASE_KEYWORDS' => GESHI_CAPS_NO_CHANGE,
    'QUOTEMARKS' => array("'", '"'),
    'ESCAPE_CHAR' => '\\',
    'KEYWORDS' => array(
        1 => array(
            'include', 'require', 'include_once', 'require_once',
            'for', 'foreach', 'as', 'if', 'elseif', 'else', 'while', 'do', 'endwhile',
            'endif', 'switch', 'case', 'endswitch', 'endfor', 'endforeach',
            'return', 'break', 'continue'
            ),

次の部分で上記の配列名に対応した各コードのハイライト化を設定します。

    'STYLES' => array(
        'KEYWORDS' => array(
            1 => 'color: #ff00cc;font-weight: bold;;',
            2 => 'color: #000000; font-weight: normal;',
            3 => 'color: #000066;'
            ),
        'COMMENTS' => array(
            1 => 'color: #008000; font-style: normal;',
            2 => 'color: #008000; font-style: normal;',
            'MULTI' => 'color: #008000; font-style: normal;'
            ),

3~5行目:KEYWORD 1、2、3についてフォントカラー、フォント・ウェイトなどを指定します。この他にスタイルシートのフォーマットにしたがってフォントの字形を変化させることができます。
8~11行目:コメント 1(//)、2(#)、MULTI(/* */)についてフォントのカラー、スタイル(イタリックなど)を指定します。
以下、自分の変更したいコードについて同じように変更します。

5. 使用法

preタグの基本的記述法

<pre lang="php" line="1" colla="+/-">
......表示したいコードを入れる
</pre>

以上のタグとコードのセットを表示したい部分に挿入します。
lang="" は使用するソース言語の種類を指定します。このオプションは必須です。サポートされているソース言語については、wp-codebox/geshi/geshi ディレクトリ内のファイル名を参照してください。line="" は、ライン番号の表示・非表示、開始番号の指定を行います。colla は、CodeBoxをデフォルトで表示する(+)か表示しない(-)かを指定します。line及びcollaの記述は省いてもかまいません。

ライン番号の調整
line="n"と指定すれば番号枠は表示されません。line="5"のように指定すれば番号は5から表示されます。「Default show Line Number」にチェックを入れなくても、line="1"のように明示的に指定してやればライン番号枠は入ります。この場合、非表示は、line="n"でもline=""(チェック入りの場合無効)も指定できます。

機能バーを表示して使用する
「Hide the Function Bar」オプションをデフォルト(チェックを入れない)に設定しておくと機能バーが次のように表示されます。

左側の「View Code」をクリックすれば別ウィンドウが開いてCodeBoxの内容が表示されます。その右側にある表示(PHP)は、プログラム言語の種類を示しています。右側の「copy to clipboard」をクリックするとCodeBoxの内容がクリップボードにコピーされます。上矢印ボタンをクリックすればCodeBoxが消えます。「?」をクリックするとこのプログラムの作者のサイトの使用法を説明したページにジャンプします。

<pre lang=”php” line=”1″ file=”dummy.php”>のようにfileで保存ファイル名を指定すると、機能バーが次のよう変化します。ファイル名をクリックすればソースコードをローカルPCのエディターでオープン、あるいは保存することができます。

ソースをハイライト化せずに表示する
ソースを色分したり、強調表示せずにそのまま表示するには次のような設定を行います。

<pre lang="" line="">

lang="" は必ず入れてください。この設定は、lang="text"に相当します。

問題点
  1. 枠をオーバーフローする文字列を折り返して表示させるオプションが設定できない。overflow=autoにしておけば、枠を超えた文字列に対してはスクロールバーが表示されて、それをスライドすることによって確認することができます。スクロールバーを表示させずに文字列をラップさせて表示したいユーザーも私を含めていると思います。色々試してみましたが、今のところ成功していません。
  2. <pre>タグの内部で機能バーを隠す設定ができない。機能バーを表示したいウィンドウとそうでないものがあると思います。このケースバイケースによる機能バーの表示・非表示の区別が今のところできません。
  3. オプションの(3)と(5)はうまく働かないようです。しかし、これらの機能はほとんど使用する意味がないので詳しく追求することはしませんでした。


ソースコードをハイライト表示するプラグイン:WP-CodeBox” への1件のコメント

  1. ピンバック: wordpressでRのsyntaxhighlighter | Pearls for Swine

コメントを残す