Home > PHPメモ | wordpress > wordpressでコードを見やすく表示するプラグイン３種類

wordpressでコードを見やすく表示するプラグイン３種類

2009-05-29 (金)

カテゴリ：PHPメモ | wordpress

コードを見やすくハイライトするためのプラグインの有名どころ

PHP Highligh String
iG:Syntax Hiliter
SyntaxHighlighter

の三種類を比較してまとめてみました。

１．PHP Highligh String 0.9.9

表示例

特徴

PEARのtexthilighterを使ったソースコードハイライト用プラグインです。
対応言語は‘php’,‘cpp’,‘css’,‘diff’ ,‘dtd’ ,‘javascript’ ,’mysql’ ,‘perl’ ,‘python’ ,‘ruby’ ,’sql’ ,‘xml’ ,‘java’。

長所

javascriptを使わないので閲覧環境への依存度が低い。
初期状態でも見やすくてキレイ。
行番号表示の際に開始行の番号を指定できる。

難点

インストールがやや難しいというか構造が複雑なので慣れていないと戸惑うかも？
各クラスのspanタグにcssで色づけするのでソースは汚くなります。

書式

[code lang=”言語名”]
<?php //phpの場合は必須です

コード

?> //phpの場合は必須です
[/code]

注意その１

行番号表示はolタグを使うので，お使いのテーマのolやliタグのスタイルの指定を受ける可能性があります。

この場合の回避方法は

ol.hl-main li{
padding:0;
margin:0;
line-height: 1.0;
}

ol.hl-main{
padding:0;
margin:0;
border:none;
}
などolとliをリセットするスタイル指定をstyle.cssの最後に追加してください。

注意その２

phpを対象言語とした場合は
<?php と ?> でくくらないとハイライトされません。

これはこのプラグインのハマりどころだと思います。
長い間うちの環境では使えないのかと思っていました・・・が，この記述をしていないだけでした。
ですので，昔あきらめたという方も是非もう一度確認してみてください。

注意その３

ハイライトなし一行だけのコードを

[code]
一行だけのコード
[/code]

と記述すると内側のdiv及びpreの高さを考慮せずに外側のdivだけheight指定されてしまい

このようにコード部分がが表示されなくなってしまいます。

wp-config/plugins/phplstring/php_hl_string.php
の120行目あたり

<?php
        if($num_lines > $this->lines)
            $style = 'style="height:' . ($this->lines * $this->line_height) . 'px;"';
        elseif($num_lines == 1)
            $style = 'style="height:' . (1.2 * $this->line_height) . 'px;"';
        else
            $style = '';
?>

を

<?php
        if($num_lines > $this->lines)
            $style = 'style="height:' . ($this->lines * $this->line_height) . 'px;"';
/*      elseif($num_lines == 1)
            $style = 'style="height:' . (1.2 * $this->line_height) . 'px;"';
*/      else
            $style = '';
?>

のように一部コメントアウトしてしまいましょう。
これで一行のコードも外側divにスタイルシート指定が効いてきちんと表示されます。

ダウンロード

PHP Highligh String
Chameleon Cyber ? Download

２．iG:Syntax Hiliter 日本語版

表示例

ハイライト表示

プレーンテキスト表示

特徴

スタイル指定やプレーンテキストの切り替えにjavascriptを使用。
コードハイライトはolタグで，プレーンテキストはtextareaで描写します。

長所

インストール時のディレクトリ構成が変則的だが導入は比較的簡単。
また，ハイライト表示とプレーンテキストとの切り替えが簡単なので，どうしてもこの機能が欲しいという場合には便利です。

難点

olのspan属性，liタグのstyle属性でハイライトするので表示部分のHTMLソースはぐちゃぐちゃになります。

又，liのstyle属性をjavascriptで描き出すので
wp-content/plugins/ig_syntax_hilite/css
以下に配置されたcssファイルは役に立たちません。
そのため見た目（行間や色・フォント等）を細かくカスタマイズするのは困難です。
一部（背景色など）であれば
wp-content/plugins/ig_syntax_hilite/css/syntax_hilite_css.css
で指定できます。

どうしても詳細部分を変更したい場合は
wp-content/plugins/ig_syntax_hilite/geshi.php
のstyleを書き出してる部分を空白にして
wp-content/plugins/ig_syntax_hilite/css/syntax_hilite_css.css
で指定する，

もしくは
wp-content/plugins/ig_syntax_hilite/geshi/対応言語名.php
ファイル内のstyle定義部分を書き換えることで変更できます。

書式

[code]

コード

[/code]

ダウンロード

iG:Syntax Hiliter 日本語版
iG:Syntax Hiliter 日本語版 - MMRT daily life

３．SyntaxHighlighter 1.1.2

表示例

特徴

javascriptのみでハイライト表示を実現。
インストールは三種類中一番簡単だったと思います。

長所

プレーンテキスト表示を別窓で開く
コードをクリップボードにコピーする
コードを印刷する
といった機能がいけてるし見た目もかっこいい。

cssを使わずにjavascriptのみでハイライトしますのでソースが一切汚されません。
SEOやdocumentのvalidation，アクセシビリティといった観点で選べばこれ一択でしょう。

難点

javascriptのみ使用なので，環境によってはハイライト機能以外は一切使い物になりません。
セキュリティの設定にもよると思いますが，筆者の環境ではIEでは3機能のうち一つも使えないばかりかブラウザ上部にエラーバーが表示されます。
Firefoxでも「クリップボードにコピー」は機能しませんでした。

書式

[code=”php”]

コード

[/code]

他にも何通りかあります

ダウンロード

SyntaxHighlighter
WordPress ? SyntaxHighlighter Evolved ? WordPress Plugins

まとめ

当サイトでは一番目のPHP Highligh String 0.9.9を使わせていただいています。

実装方法がjavascriptかphpのどちらに寄るかの違いによるメリット・デメリットで選ぶと良いでしょう。
どのプラグインも一長一短です。コードのハイライトは複雑な処理ですので仕方ありません。
また，ハイライトにこだわらず，preやcodeタグをCSSで見やすく装飾するにとどめるという選択肢もありありだと思います。

今後時間があればpearのスクリプトハイライト用ライブラリ text_highlighterを試してみたいと思います。