考えてみるとこのサイトは技術系覚書なので、ソースをのせることが多いのです。
で、Syntax Highlightです。
どうせソース乗せるなら見やすいほうがいいですよね。
install
Nucleusの本家サイトのWikiのgeshiエントリのDownload:からアーカイブをダウンロードします。
このプラグインはGeSHiを使っています。
せっかくなので最新版に差し替える為にGeShiの最新版もDownloadsからダウンロードしておきましょう。
まずはNP_Geshi.phpのアーカイブを任意のディレクトリに解凍。
するとgeshiディレクトリとNP_Geshi.phpができます。
次に、GeSHi-<version>.zipを解凍するのですが、先程のNP_Geshi.phpのアーカイブと同名のgeshiディレクトリに解凍されますので、違うディレクトリに解凍するとかして上書きされないようにしてください。
で、こちらのgeshiディレクトリの中にあるgeshiディレクトリの内容全てと(geshi/geshi*)、geshi.phpを(geshi/geshi.php)を先程のNP_Geshi.phpのアーカイブと同名のgeshiディレクトリに上書きコピーしてしまいます。
あ、後、GeSHi-1.0.7.20.zipだとgeshi/geshi/に.php.php.swpっていう残骸が残ってますから、これ消しましょう^^;
後は、NP_Geshi.phpとgeshiディレクトリを/nucleus/plugin/ディレクトリに置いて、管理画面のプラグイン管理からインストールすれば完了です。
Highlightする為の3つの方法
で、インストールを完了すると、preタグに言語名をつけてあげるとHighlight・・・されません^^;
ちょっとごにょごにょしてあげる必要があります。
enable_classesを使わない。
一番手っ取り早いですけど、出力されるHTMLはごちゃごちゃします。
方法は簡単。NP_Geshi.phpの80行目あたりを変更するだけです。
$geshi->enable_classes(true);
$geshi->enable_classes(false);
これでスタイル指定付のspanタグが出力されますから、Syntax Highlightされます。
geshi.phpのget_stylesheetを使う。
これは本家サイトのフォーラムにあるやり方なんですけど、同じスタイル指定を何回も出力するので、いまいちいけてない気がしますけど一応。
NP_Geshi.phpの89行目からを以下のように変更します。
$geshi->enable_classes(true);
$ret .= "\r\n\r\n"; $ret .= "<!-- stylesheet for code highlighting -->"; $ret .= "<style type=\"text/css\">\r\n"; $ret .= $geshi->get_stylesheet(); $ret .= "</style>\r\n"; $ret .= $geshi->parse_code(); $ret .= "\r\n\r\n"; return $ret;
まぁ、結果よければ、なのかな。
スタイル指定をlinkするCSSファイルに書く。
このサイトはこの方法です。
Highlightに使われるspanタグのクラスはGeSHiルールによる命名規則ですから、それにあったクラスを定義しておいてやればいいのです。
で、いちいち作るのもめんどくさいので、Wikiサイトで使っているDocWikiも幸いなことにGeSHiを使ってSyntax Highlightしているので、この定義をそのまんま使います。
内容は以下の通り。
.code .br0 { color:#886600; } .code .co1 { color:#808080; font-style:italic; } .code .co2 { color:#808080; font-style:italic; } .code .coMULTI { color:#808080; font-style:italic; } .code .es0 { color:#000099; font-weight:bold; } .code .kw1 { color:#EE0022; } .code .kw2 { color:#000000; font-weight:bold; } .code .kw3 { color:#FF44CC; } .code .kw4 { color:#993333; } .code .kw5 { color:#0000FF; } .code .me0 { color:#006600; } .code .me1 { color:#0088CC; } .code .nu0 { color:#CC66CC; } .code .re0 { color:#5500AA; } .code .re1 { color:#0000FF; } .code .re2 { color:#0000FF; } .code .re4 { color:#009999; } .code .sc0 { color:#00BBDD; } .code .sc1 { color:#DDBB00; } .code .sc2 { color:#009900; } .code .st0 { color:#00BB66; }
この形が自然じゃないでしょうか。
使い方
このエントリ時点のGeSHiのバーションは1.0.7.20です。
サポートされている言語は、
Actionscript、ADA、Apache Log、AppleScript、ASM、ASP、AutoIT、Backus-Naur form、Bash、BlitzBasic、C、C for Macs、C#、C++、CAD DCL、CadLisp、CFDG、CFDG、ColdFusion、CSS、Delphi、DIV、DOS、Eiffel、Fortran、Fortran、FreeBasic、GML、Groovy、HTML、Inno、IO、Java、Java 5、Javascript、LaTeX、Lisp、Lua、Microprocessor ASM、mIRC、MySQL、NSIS、Objective C、OCaml、OpenOffice BASIC、Oracle 8 SQL、Pascal、Perl、PHP、PL/SQL、Python、Q(uick)BASIC、robots.txt、Ruby、SAS、Scheme、SDLBasic、Smalltalk、Smarty、SQL、T-SQL、TCL、thinBasic、Uno IDL、VB.NET、Visual BASIC、Visual Fox Pro、Winbatch、X++、XML、Z80 ASM
以上です。
で、実際にNucleusの中で使うには、preタグに属性を以下の属性を追記することでSyntax Highlightされます。
abap、actionscript、ada、apache、applescript、asm、asp、autoit、bash、blitzbasic、bnf、c、c_mac、caddcl、cadlisp、cfdg、cfm、cpp-qt、cpp、csharp、css-gen、css、d、delphi、diff、div、dos、dot、eiffel、fortran、freebasic、genero、gml、groovy、haskell、html4strict、idl、ini、inno、io、java、java5、javascript、latex、lisp、lua、m68k、matlab、mirc、mpasm、mysql、nsis、objc、ocaml-brief、ocaml、oobas、oracle8、pascal、per、perl、php-brief、php、plsql、python、qbasic、rails、reg、robots、ruby、sas、scheme、sdlbasic、smalltalk、smarty、sql、tcl、text、thinbasic、tsql、vb、vbnet、vhdl、visualfoxpro、winbatch、xml、xpp、z80
例えばJava5なら
<pre java5>
System.out.println("Hello World!");
</pre>
PHPなら
<pre php>
print("Hello World!");
</pre>
XMLなら
<pre xml> <system> <out> <println>Hello World</println> </out> </system> </pre>
とかこんな感じです。