PukiWiki/自作プラグイン/GeSHi

最終更新: 2009-01-11 (日) 08:18:25

geshi.inc.php †

サマリ	GeSHi を利用してソースコードを色分け表示する
リビジョン	1.3
対応バージョン	1.4.6 以降
作者	revulo
ライセンス	GPLv2

▲

目次 †

▲

概要 †

様々な言語のソースコードを、構文ハイライトして表示するプラグインです。

内部で GeSHi (Generic Syntax Highlighter) を利用しています
スタイルシートや設定ファイルを用いて表示色などを設定できます
現在、126 種類の言語に対応しています (詳しくは GeSHi のページを見て下さい)

▲

サンプル †

PHP のコードを構文ハイライトして表示した例を以下に示します。

▲

インストール †

▲

新規インストール †

(ディレクトリ構成例)

 pukiwiki/
  ├ cache/
  ｜  └ geshi/             ‥‥ 変換した HTML ファイルのキャッシュ用ディレクトリ
  ｜
  ├ plugin/
  ｜  ├ geshi/             ‥‥ GeSHi のファイルを展開したディレクトリ
  ｜  ├ geshi_config/      ‥‥ 設定ファイル用ディレクトリ
  ｜  ｜  ├ default.php    ‥‥ 全言語に共通の設定
  ｜  ｜  └ php.php.sample ‥‥ PHP 用の設定ファイルのサンプル
  ｜  ｜                         (php.php にリネームすると色が変わります)
  ｜  └ geshi.inc.php      ‥‥ プラグイン本体
  ｜
  └ skin/
      └ geshi/             ‥‥ スタイルシート用ディレクトリ
          ├ default.css    ‥‥ 各言語のデフォルトの設定
          └ php.css.sample ‥‥ PHP 用スタイルシートのサンプル
                                 (php.css にリネームすると色が変わります)

geshi.inc.php プラグインのアーカイブファイルをダウンロードし、 PukiWiki をインストールしてあるディレクトリで展開します。

$ tar xvfz geshi-1.3.tar.gz

cache/geshi というディレクトリが作られるので、書き込み許可を与えて下さい。

$ chmod 777 cache/geshi

GeSHi のページからアーカイブをダウンロードし、 PukiWiki の plugin ディレクトリで展開します。

$ cd plugin
$ unzip geshi-1.0.8.2.zip

UNIX 環境では、パーミッションが原因で動作しない場合があります。その場合は、誰でもファイルを読めるようにパーミッションを変更して下さい。

$ chmod -R 755 geshi
$ chmod 644 geshi/*.php geshi/*/*.php

あとは pukiwiki.ini.php の設定を以下のように変更して下さい。

define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0);

▲

以前のバージョンからのアップデート †

以前のバージョンからバージョンアップする場合は、以下の点に注意して下さい。

バージョン 1.2 から、キャッシュの保存場所が cache/geshi ディレクトリに変わりました。 cache ディレクトリに残っている～.geshi というファイルは、使わないので削除して構いません。

▲

使い方 †

書式は次のようになっています。

#geshi(オプション){{
  ……
  ソースコード
  ……
}}

例えば、PHP 用の構文ハイライトをして行番号付きで表示するには、このように書きます。

#geshi(php,number){{
<?php
echo 'test';
?>
}}

または、file オプションを使って、

#geshi(javascript, file=http://www.revulo.com/pukiwiki/skin/ajaxtree/ajaxtree.js)

のように、ソースコードをファイルから読み込んで表示することもできます。

オプションは次のようなものが指定できます。複数のオプションを指定する場合は「，」(カンマ) で区切って書いて下さい。デフォルト値は、geshi.inc.php の PLUGIN_GESHI_DEFAULT_LANGUAGE などの値を設定することで変更できます。

言語名 (デフォルト: 構文ハイライトなし)
- 言語名もしくは language=言語名 ‥‥ 言語を指定します。言語名は大文字でも小文字でも構いません
- 言語名を指定しなかった場合は、単なる整形済みテキストとして表示されます
  (ただし PLUGIN_GESHI_DEFAULT_LANGUAGE が設定されていたら、その言語とみなして処理します)

number (デフォルト: off)
- number もしくは number=on ‥‥ 行番号を表示します
- number=off ‥‥ 行番号を非表示にします

start (デフォルト: 1)
- start=数字 ‥‥ 行番号を表示する際の開始番号を指定します

file (デフォルト: なし)
- file=ファイル名 ‥‥ 指定したファイルを読み込んで表示します
- ファイル名としては以下のものが指定できます *1
  - http:// で始まる URL
  - InterWiki を用いた URL
  - 添付ファイル名 (PukiWiki Plus! の圧縮された添付ファイルには未対応です)

cache (デフォルト: on) *2
- cache もしくは cache=on ‥‥ キャッシュ機能を有効にします
- cache=off ‥‥ キャッシュ機能を無効にします
- cache=reset ‥‥ キャッシュを強制的に再作成します

▲

設定 †

▲

プラグインの設定 †

geshi.inc.php の先頭部分で以下の値を設定することで、動作をカスタマイズできます。

PLUGIN_GESHI_LIB_DIR: GeSHi がインストールされているディレクトリ

PLUGIN_GESHI_CONFIG_DIR: 設定ファイルが置かれているディレクトリ

PLUGIN_GESHI_CSS_DIR: スタイルシートが置かれているディレクトリ (SKIN_DIR で始まるディレクトリにして下さい)

PLUGIN_GESHI_USE_CSS: スタイルシートを利用する (true, false のいずれか)

PLUGIN_GESHI_CACHE: キャッシュを使用するかどうかのデフォルト値 (true, false のいずれか)

PLUGIN_GESHI_DEFAULT_LANGUAGE: 言語名が指定されなかった時のデフォルトの言語名

PLUGIN_GESHI_LINE_NUMBERS: 行番号を表示するかどうかのデフォルト値 (true, false のいずれか)

▲

スタイルシートの設定 †

バージョン 1.2 以降では、外部スタイルシートを利用できるようになりました。 skin/geshi ディレクトリにあるスタイルシートを自動的に読み込みます。

default.css があれば読み込みます
(言語名).css があればそれも読み込みます
(言語名).css に書かれた設定は、default.css の設定よりも優先されます

全言語に共通の設定をする場合は、default.css に追記して下さい。例えば当サイトでは、default.css に次のように書いて背景色などを設定しています。

pre.geshi,
pre.geshi li {
	background: #f7f7f7;  /* ソースコードの部分の背景色 */
}

pre.number {
	background: #e7e7ef;  /* 行番号の背景色 */
}

pre.geshi li {
	margin: 0;            /* ボーダーや位置を微調整 */
	margin-left: 3.5em;
	padding: 0 0.5em;
	border-left: solid 1px #bbb;
}

各言語用の設定をする場合は、default.css を直接書き換えても良いですが、 (言語名).css にその言語の分の設定をコピーして、そちらを編集することをお勧めします。 PHP 用スタイルシートのサンプルを php.css.sample という名前で同梱してあるので、参考にして下さい。このファイルを php.css にリネームすると表示が変わります。

スタイルシートに登場する .kw1 などのクラス名は、大体このような意味になっています。

kw ‥‥ キーワード
co ‥‥ コメント
es ‥‥ エスケープキャラクタ
br ‥‥ 括弧
st ‥‥ 文字列
nu ‥‥ 数字
me ‥‥ メソッド
sy ‥‥ 記号
re ‥‥ 正規表現
sc ‥‥ その他の部分

ある部分の色を変更するのに、どのクラスのスタイルを設定し直せば良いのかは、 HTML のソースを見て対応を調べて下さい。

▲

設定ファイルによる設定 †

バージョン 0.7 以降では、 sonots さんのパッチを取り込み、 plugin/geshi_config ディレクトリの設定ファイルによって各種設定ができるようになりました。

default.php があれば読み込みます
(言語名).php があればそれも読み込みます
(言語名).php に書かれた設定は、default.php の設定よりも優先されます

設定ファイルでは、GeSHi クラスのメソッドやプロパティが利用できます。例えば、スタイルシートを利用しない設定にした場合でも、 default.php に次のように書くと背景色を指定できます。

<?php

// 行番号を表示する場合
if ($geshi->line_numbers) {
    // 行番号の背景色
    $geshi->set_overall_style('background: #e7e7ef;', true);
    // ソースコードの部分の背景色
    $geshi->set_code_style('background: #f7f7f7;', true);
}

// 行番号を表示しない場合
else {
    // 全体の背景色
    $geshi->set_overall_style('background: #f7f7f7;', true);
}

?>

他にもいろいろな設定ができますが、何が設定できるのかは GeSHi のマニュアルを見て下さい。参考までに、有用そうな設定の例をいくつか挙げておきます。

$geshi->enable_strict_mode();
$geshi->set_header_type(GESHI_HEADER_PRE_TABLE);

また、設定ファイルを用いて、各言語の色分けの設定をすることも可能です。 PHP 用の設定ファイルのサンプルを php.php.sample という名前で同梱してあるので、参考にして下さい。このファイルを php.php にリネームすると表示が変わります。

各言語用の設定ファイルを自分で作る場合は、 GeSHi のアーカイブに含まれている perl.php や java.php を plugin/geshi_config ディレクトリにコピーし、それを編集して下さい。同梱されている php.php.sample のように、一部分だけを切り出しても構いません。なお、KEYWORD の 1 といった項目が何を指すかは言語によって異なるので、その辺りは各言語のファイルの中を見て判断して下さい。

▲

高度な利用法 †

▲

スタイルシートの作成 †

アーカイブに同梱されているスタイルシートは、GeSHi 1.0.8.2 用に作成したものです。そのため、より新しいバージョンの GeSHi と組み合わせると、表示がおかしくなる場合があります。その場合には、スタイルシートを新たに作成して下さい。

スタイルシートは、GeSHi のアーカイブの contrib ディレクトリに含まれている cssgen2.php を使って作ります。このファイルにブラウザからアクセスするか、コマンドラインから以下のように実行して下さい。

$ php cssgen2.php > default.css

後は、geshi-1.3.tar.gz に含まれている default.css から、 pre.geshi や table.geshi の設定をコピー＆ペーストしてくれば完成です。

しかし、実は cssgen2.php が作成するスタイルシートはムダが多いです。共通部分をまとめたスタイルシートが作りたい場合は、当サイトで配布している cssgen2.php の改造版を利用して下さい。

▲

行番号の表示 †

標準の設定では、行番号を表示した場合にいくつかの問題があります。

ブラウザによっては、コピー＆ペーストが正常に行えません
start オプションを用いると XHTML 1.1 準拠でなくなります

GeSHi 1.0.8.1 以降で実装された GESHI_HEADER_PRE_TABLE の機能を用いると、これらの問題を解消できます。具体的には、plugin/geshi_config/default.php に以下の設定を追加します。

$geshi->set_header_type(GESHI_HEADER_PRE_TABLE);

一応、これで表示はされますが、もう少し見映えを良くしたい場合は、 skin/geshi/default.css に次のような設定を追加してみて下さい。

table.geshi {
	margin: 1em;
	border: solid 1px #bbb;
	border-collapse: collapse;
	background: #f7f7f7;
}

table.geshi td {
	padding: 0.5em !important;
	width: 100%;
}

table.geshi .ln {
	border-right: solid 1px #bbb;
	width: auto;
	background: #e7e7ef;
}

table.geshi pre {
	border: none;
	line-height: 1.3 !important;
	overflow: auto;
	white-space: pre;
	word-wrap: normal;
}

table.geshi .ln pre {
	overflow: visible;
}

これで、かなり見た目が整います。ただし、ソースコードの１行の文字数が多すぎると、IE や Safari では表示が崩れるので注意して下さい。

▲

ダウンロード †

geshi-1.3.tar.gz
- プラグイン本体
- スタイルシート (GeSHi 1.0.8.2 用)
  - GeSHi 標準のスタイルシート
  - PHP 用スタイルシートのサンプル
- 設定ファイル
  - デフォルト設定用の設定ファイル
  - PHP 用の設定ファイルのサンプル

geshi_cssgen-20090101.tar.gz
- スタイルシート作成用スクリプト (GeSHi に同梱されている cssgen2.php の改造版)

geshi_css-20090101.tar.gz
- GeSHi の旧バージョン (1.0.7.20～1.0.8.1) 用のスタイルシート

▲

更新履歴 †

Version 1.3 (2009/01/01)
- file オプションを追加
- GeSHi の GESHI_HEADER_PRE_TABLE モードに対応
- 不要な flock(), ignore_user_abort() を削除

Version 1.2 (2008/01/01)
- 外部スタイルシートを利用する機能を追加
- キャッシュの保存場所を cache/geshi ディレクトリに変更

Version 1.1 (2007/08/04)
- タイムスタンプを変更しない編集の時もキャッシュが更新されるように改良
- プレビュー時にはキャッシュを使用しないように変更

Version 1.0 (2007/02/12)
- プラグインの引数でオプションを指定できるように

Version 0.7 (2007/02/04)
- sonots さんのパッチを取り込み、行番号表示と設定ファイルの機能を追加

Version 0.6 (2007/01/25)
- 色設定を調整。highlight_string() を利用する機能は別プラグインに分離

Version 0.5 (2007/01/14)
- キャッシュ機能を追加

Version 0.2 (2007/01/01)
- 組み込み関数の highlight_string() を利用するオプションを追加

Version 0.1 (2006/10/11)
- 暫定公開

▲

備考 †

同様の機能を持つプラグインが他にもあるのでまとめておきます。

プラグイン名	使用ライブラリ
geshi.inc.php	GeSHi (PHP)
highlighter.inc.php	PEAR::Text_Highlighter (PHP)
prettify.inc.php	google-code-prettify (JavaScript)
shjs.inc.php	SHJS (JavaScript)
codehighlight.inc.php	独自に実装 (PHP)
highlight.inc.php	SyntaxHighlighter (JavaScript)