Joomla! でソースコードをハイライト表示するには(2)
ご利用のブラウザは、JavaScript が無効 となっていませんか?
このサイトでは、コンテンツの一部が非表示 、あるいは、コメント、お問い合わせの投稿ができない 、検索ができない ことがあります。
概要 :
前回(
Joomla! でソースコードをハイライトする(1) )で、記事の中での基本的なソースコードの記述の仕方と簡単な拡張の方法について記述しました。
今回は、各言語のデフォルト色を変更するには、どうしたら良いか・・・を簡単に解説したいと思います。
前回も記述したとおり、Joomla!の"コンテンツ - Code Hightlighter (GeSHi)"は、GeSHiがベースです。GeSHiは、phpのクラスライブラリです。このGeSHiの色定義を変更すれば良いことになります。
では、どこをどのように変更すれば、そのGeSHiの色定義をできるか、簡単に解説したいと思います。
もっと、Joomla!やPHP、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言語と同じようにハイライトされていることがわかります。
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$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です。
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$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行目:複数行コメントの定義
があります。これは、どのキャラクタ(文字列)がコメントになるかを定義したものです。色定義ではなりません。
その下の方に色定義はあります。
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
'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 => : 複数行コメントの色定義です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?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ファイルを直に扱うやり方なので、少し、抵抗を感じたかもしれません。
しかし、色を変更するために、複雑なプログラムを記述するわけではありません。
1回やってしまうと、単純に色の変更ができることがわかると思います。
GeSHiは、いろんなことができます。Joomla!は、そのGeSHiのほんの一部しか使っていません。
それは、いろんなことをやり始めたら、"簡単に・・" という基本コンセプトから外れてしまうからかもしれません。
ただ、開発も携わるような人には、もう少し、カスタマイズが画面から、できても良いのになぁと思います。
次回は、そのあたりを記事に書きたいと思います。上記のように行番号をつけたり、色を変えてみたり、GeSHiでは簡単にできます。
ただ、phpのGeSHiクラスを用いて制御しますが、これを汎用的に・・というかプログラミングなしに・・どうすればできるか解説したいと思います。
コメントをどうぞ