Joomla! でソースコードをハイライト表示するには（２）

公開日| 2009年04月25日 | コメントはまだありません。

概要 :
　前回（Joomla! でソースコードをハイライトする（１））で、記事の中での基本的なソースコードの記述の仕方と簡単な拡張の方法について記述しました。今回は、各言語のデフォルト色を変更するには、どうしたら良いか・・・を簡単に解説したいと思います。
　前回も記述したとおり、Joomla!の"コンテンツ - Code Hightlighter (GeSHi)"は、GeSHiがベースです。GeSHiは、phpのクラスライブラリです。このGeSHiの色定義を変更すれば良いことになります。
では、どこをどのように変更すれば、そのGeSHiの色定義をできるか、簡単に解説したいと思います。

参考(GeSHiのオンラインマニュアル)：http://qbnz.com/highlighter/geshi-doc.html
１回：Joomla! でソースコードをハイライトする（１）
２回：Joomla! でソースコードをハイライトする（２）
３回：Joomla! でソースコードをハイライトする（３）

もっと、Joomla!やPHP、Apacheについて詳しく知りたい方は、以下の本なども良いと思います。
本から学ぶことは多いと思います。ネットだけでは判らない様々な事に気づかされます。

Joomla!Pro Book オープンソースCMS導入&カスタマイズガイド

初めてのPHP & MySQL 第2版

Apacheハンドブック

GeSHiの色定義はどこか？

GeSHiの色定義は、phpのファイルで記述しています。
一時的な色の変更などは、phpで動的に割り付けなおすことができますが、基本的な色の変更をしたい場合は、そのphpファイルを変更することになります。
このphpファイルのことをランゲージファイル(Language File)とGeSHiでは、呼んでいます。

では、早速、ランゲージファイルを変更してみましょう。

まず、本物のランゲージファイルをコピーして、適当な名前をつけて保存します

例）
php言語の配色を変更したいとします。
そのとき、以下のファイルを同じディレクトリでコピーします。

/libraries/geshi/geshi/php.php

コピーした名前をphplocal.phpとここではしましょう。
これで、phplocal という言語ができたことになります。

実際に試してみましょう。
以下のように記述した場合、どのように見えるでしょう。

<pre xml:lang="phplocal">
$language_data = array(
    'LANG_NAME' => 'PHP',
    'COMMENT_SINGLE' => array(1 => '//', 2 => '#'),
    'COMMENT_MULTI' => array('/*' => '*/'),
    'HARDQUOTE' => array("'", "'"),
    'HARDESCAPE' => array("'", "\\"),
    'HARDCHAR' => "\\",
    'COMMENT_REGEXP' => array(
        //Heredoc and Nowdoc syntax
        3 => '/<<<\s*?('?)([a-zA-Z0-9]+?)\1[^\n]*?\\n.*\\n\\2(?![a-zA-Z0-9])/siU',
        // phpdoc comments
        4 => '#/\*\*(?![\*\/]).*\*/#sU',
        // Advanced # handling
        2 => "/#.*?(?:(?=\?\>)|^)/smi"
        ),
    'CASE_KEYWORDS' => GESHI_CAPS_NO_CHANGE,
</pre>

実際に、以下のように見えます。確かに、php言語と同じようにハイライトされていることがわかります。

$language_data = array(
    'LANG_NAME' => 'PHP',
    'COMMENT_SINGLE' => array(1 => '//', 2 => '#'),
    'COMMENT_MULTI' => array('/*' => '*/'),
    'HARDQUOTE' => array("'", "'"),
    'HARDESCAPE' => array("'", "\\"),
    'HARDCHAR' => "\\",
    'COMMENT_REGEXP' => array(
        //Heredoc and Nowdoc syntax
        3 => '/<<<\s*?('?)([a-zA-Z0-9]+?)\1[^\n]*?\\n.*\\n\\2(?![a-zA-Z0-9])/siU',
        // phpdoc comments
        4 => '#/\*\*(?![\*\/]).*\*/#sU',
        // Advanced # handling
        2 => "/#.*?(?:(?=\?\>)|^)/smi"
        ),
    'CASE_KEYWORDS' => GESHI_CAPS_NO_CHANGE,

このように、簡単に個人的なランゲージファイルを作成することができます。

まず、コピーを行うのは、バックアップの意味もありますし、元のphp.phpに変更を加えてしまうと、GeSHiをアップデートしたときや、Joomla!をアップデートしたときに間違って上書きするのを回避するためでもあります。後々のメンテナンスを楽にするためにも、コピーをして、そのコピーしたファイルに手を加えていった方が良いと思います。

色を変更してみましょう

さっき、コピーしたファイル(phplocal.php)に変更を加えて、色を変えてみましょう。

ここでは、例としてコメントの色を変更してみましょう。
まず、コメントの色定義をしているところを確認してみましょう。
以下は、phplocal.phpです。

$language_data = array(
    'LANG_NAME' => 'PHP',
    'COMMENT_SINGLE' => array(1 => '//', 2 => '#'),
    'COMMENT_MULTI' => array('/*' => '*/'),
    'HARDQUOTE' => array("'", "'"),
    'HARDESCAPE' => array("'", "\\"),
    'HARDCHAR' => "\\",
    'COMMENT_REGEXP' => array(
        //Heredoc and Nowdoc syntax
        3 => "/<<<\s*?('?)([a-zA-Z0-9]+?)\1[^\n]*?\\n.*\\n\\2(?![a-zA-Z0-9])/siU",
        // phpdoc comments
        4 => "#/\*\*(?![\*\/]).*\*/#sU",
        // Advanced # handling
        2 => "/#.*?(?:(?=\?\>)|^)/smi"
        ),
    'CASE_KEYWORDS' => GESHI_CAPS_NO_CHANGE,

55行目:行コメントの定義 56行目:複数行コメントの定義があります。これは、どのキャラクタ（文字列）がコメントになるかを定義したものです。色定義ではなりません。
その下の方に色定義はあります。

    'STYLES' => array(
        'KEYWORDS' => array(
            1 => 'color: #b1b100;',
            2 => 'color: #000000; font-weight: bold;',
            3 => 'color: #990000;',
            4 => 'color: #009900; font-weight: bold;'
            ),
        'COMMENTS' => array(
            1 => 'color: #666666; font-style: italic;',
            2 => 'color: #666666; font-style: italic;',
            3 => 'color: #0000cc; font-style: italic;',
            4 => 'color: #009933; font-style: italic;',
            'MULTI' => 'color: #666666; font-style: italic;'
            ),
        'ESCAPE_CHAR' => array(
            0 => 'color: #000099; font-weight: bold;',
            1 => 'color: #000099; font-weight: bold;',
            2 => 'color: #660099; font-weight: bold;',
            3 => 'color: #660099; font-weight: bold;',
            4 => 'color: #006699; font-weight: bold;',
            5 => 'color: #006699; font-weight: bold; font-style: italic;',
            6 => 'color: #009933; font-weight: bold;',
            'HARD' => 'color: #000099; font-weight: bold;'
            ),

1001 - 1006行がコメントの色定義です。
1 => : 行コメントの色定義です。
2 => : Advanced # handlingコメントの色定義です。
3 => : Heredoc and Nowdoc syntaxコメントの色定義です。
4 => : phpdoc commentsコメントの色定義です。
MULTI => : 複数行コメントの色定義です。

<?php
	//	--- php コメントのテストです ---
	//  1 : 行コメントです。色はどうですか？
	#   2 : handling .... 色はどうですか？
	/**	4 : phpdoc .... 色はどうですか？
	*/
	/*  5:  複数行コメントです。色はどうですか？
	*/
?>
 
<?php
$str = <<<'EOD'
Example of string
spanning multiple lines
using nowdoc syntax.
EOD;
 
/* 変数を使った、より複雑な例 */
class foo
{
    public $foo;
    public $bar;
 
    function foo()
    {
        $this-->foo = 'Foo';
        $this-->bar = array('Bar1', 'Bar2', 'Bar3');
    }
}
 
$foo = new foo();
$name = 'MyName';
 
echo <<<'EOT'
My name is "$name". I am printing some $foo-->foo.
Now, I am printing some {$foo-->bar[1]}.
This should not print a capital 'A': \x41
EOT;
?>

全ての色定義を以下のように変更してみましょう。
1 => : #666666 --> #ff0000
2 => : #666666 --> #00ff00
3 => : #0000cc --> #ffff00
4 => : #009933 --> #0000ff
MULTI => : #666666 --> #00ffff

<?php
	//	--- php コメントのテストです ---
	//  1 : 行コメントです。色はどうですか？
	#   2 : handling .... 色はどうですか？
	/**	4 : phpdoc .... 色はどうですか？
	*/
	/*  5:  複数行コメントです。色はどうですか？
	*/
?>
 
<?php
$str = <<<'EOD'
Example of string
spanning multiple lines
using nowdoc syntax.
EOD;
 
/* 変数を使った、より複雑な例 */
class foo
{
    public $foo;
    public $bar;
 
    function foo()
    {
        $this-->foo = 'Foo';
        $this-->bar = array('Bar1', 'Bar2', 'Bar3');
    }
}
 
$foo = new foo();
$name = 'MyName';
 
echo <<<'EOT'
My name is "$name". I am printing some $foo-->foo.
Now, I am printing some {$foo-->bar[1]}.
This should not print a capital 'A': \x41
EOT;
?>

このように色を変更できました。ここまでの記事の内容をどう思われましたか？
phpファイルを直に扱うやり方なので、少し、抵抗を感じたかもしれません。しかし、色を変更するために、複雑なプログラムを記述するわけではありません。１回やってしまうと、単純に色の変更ができることがわかると思います。

GeSHiは、いろんなことができます。Joomla!は、そのGeSHiのほんの一部しか使っていません。それは、いろんなことをやり始めたら、"簡単に・・" という基本コンセプトから外れてしまうからかもしれません。ただ、開発も携わるような人には、もう少し、カスタマイズが画面から、できても良いのになぁと思います。

次回は、そのあたりを記事に書きたいと思います。上記のように行番号をつけたり、色を変えてみたり、GeSHiでは簡単にできます。ただ、phpのGeSHiクラスを用いて制御しますが、これを汎用的に・・というかプログラミングなしに・・どうすればできるか解説したいと思います。

この記事を読んだ人は、こんな記事も読んでいます。:

ブックマークへ追加:

Trackback URL

このコメントは管理人から承認された後、表示されます。

コメントをどうぞ

がんばろう、日本！
日本赤十字の募金は、Googleで受け付けてます。
http://www.google.co.jp/intl/ja/crisisresponse/japanquake2011.html

義援金詐欺・フィッシングサイトにご注意ください。

コンテンツ

タグクラウド

リンク

このサイトは？

ウェブやソフトウェアに関するサポート＆情報サイトです。サイト構築からソフトウェアの作成、利用まであなたの助けになるかも・・・・しれません。たぶん・・。

Joomla! でソースコードをハイライト表示するには（２）

この記事を読んだ人は、こんな記事も読んでいます。:

コンテンツ

最近の記事

タグクラウド

リンク

このサイトは？

ブックマークへ追加