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

GeSHiPlusというプラグインがあります。これは、Hugo Jacksonさんが、作成したGPLのエクステンションです。 上記のダウンロード先(オリジナル)：のところで実際にVersion 1.2 をダウンロードできます。
ところが、実際に使用してみたところ、ドキュメントがわかりづらいのもありますが、少々、不具合もありました。
使い方は、理解するまで、少々、時間がかかるかもしれませんが（少なくとも私は）、 理解できてしまうと、非常にシンプルで（アイデアが）良いものだと理解できました。（Hugo Jacksonさんは、頭が良いです。）

では、GeSHiPlusというプラグインがどういうものか、解説します。

GeSHiPlusとは、文字通りGeSHiをサポートするプラグインです。Joomla!に標準で付属している"コンテンツ - Code Hightlighter (GeSHi)"は、 記事にコードを埋め込んで、表示の仕方に手を加えることがほとんどできませんでした。
それは、GeSHiPlusというプラグインでは、行番号の表示の有無とその表示の仕方を提供してくれます。
つまり、記事にコードを埋め込む際に、その情報を同時に渡してあげることで、表示を自由に切り替えることができるようにしてくれています。

例で示した方が簡単だと思いますので、以下に例をあげて説明します。

通常の"Code Hightlighter (GeSHi)"では、指定できるパラメータは、言語のみでした。
のように、xml:lang="php"を指定するのみでした。
また、WYSIWYG エディタなどで、preタグを使えない場合に{geshi}というキーワードで置き換えることが 可能なようにプラグインのパラメータで指定できるようになっています。
WYSIWYG エディタなどのご利用の場合やプラグインのパラメータでgeshiを選択されている方は、以降の記述の <pre ... > を{geshi ... } と </pre> を{/geshi} と置き換えて読んでください。

のように、 lines="true"の指定を追加することで行番号を表示できます。
linesのパラメータは、true/false/fancy があります。false:行番号を表示しない(何も指定しない場合と同じです)。 fancyは、以降に説明がありますので、そちらを参照してください。


のように、 background="#ffffe0"の指定を追加することで背景色を変更できます。
backgroundのパラメータは、HTMLで指定する色空間で指定できます。詳しくは、以降のデフォルト背景色の説明を参照してください。

のように、 lines="fancy"の指定を変更することである一定の行間で行番号を強調表示することができます。
GeSHiPlusでは、５行間隔での強調表示がデフォルトです。
そこで、intervalというパラメータを設定すると、この行間を指定できるようになっているはず？なのですが、できません。 （私が不具合だろ思う１つです）
できないのは、さておき、できることで更に話を進めましょう。

のように、 foreground="#ffe0ff"の指定を追加することで背景色まで強調と連動してい変更できます。
foregroundのパラメータは、HTMLで指定する色空間で指定できます。詳しくは、以降のデフォルト背景色の説明を参照してください。

のように、 initial="100"の指定を追加することで行番号が100から開始されます。
initialのデフォルト値は、1です。
ここまでが、GeSHiPlusの動作内容です。
ここまでで、十分な機能だとも思います。ただ、色々なソースコードを表示していると現在のVersion 1.2では、 うまく表示してくれないことが多かったです。（少なくとも私は・・・。）

そこで、今回提供しますGeSHiPlus2は、その不具合部分（先の行間指定も含めて）を改版し、何も指定しない場合の背景色の 指定と行間隔の指定が可能なように手を加えたものです。
GeSHiPlusからの不具合の対処と機能強化は、以下のとおりです。
※GeSHiPlusの機能は、全て網羅しています。

• fancy指定時の行間が機能しない不具合
• 改行キャラクタが<br />に自動変換されてしまう不具合

• 行番号表示の場合の背景色、前面色が何も指定されていない場合、固定となっていた点をプラグインの画面で設定できるようにした
• 吐き出すタグ(preタグ,divタグ)を指定できるようにパラメータを追加した(htag)
  
  • htag="pre" or 指定なし:変換情報をpreタグを付加して出力します。(GESHI_HEADER_PRE)
    
  • htag="div" :変換情報をdivタグを付加して出力します。(GESHI_HEADER_DIV)
    
  • htag="valid" :
    変換情報を preタグを付加して出力します。行番号を出力しない場合は、"pre"を指定した場合と同じです。 行番号を出力する場合は、行番号をdivタグで出力します。各リストの情報は、preタグが使用されます。 "pre"と比べて、これはわずかに大きいHTML出力を意味しますが、出力は有効なHTMLです。 (GESHI_HEADER_PRE_VALID)
    
  • htag="table" :
    変換情報を ２列のテーブルで出力します。左は、preタグで行番号が出力され、preタグで２番目は、色づけされたコードが出力されます。(GESHI_HEADER_PRE_TABLE)
    
  • htag="none":変換情報をそのまま出力します。(GESHI_HEADER_NONE)
    
• 改行をカットするパラメータを追加した(precut,poscut,allcut)
  precut,poscut,allcutのパラメータは、true/falseのみです。
  指定なしは、何も動作しません。
  
  • precut="true":指定されたソースコード先頭から最初に見つかった改行位置までを無視します。
    
  • poscut="true":指定されたソースコード末尾から最初に見つかった改行位置までを無視します。
    
  • allcut="true":precut="true"とposcut="true"を指定したのと同じ動作をします。
    
• プラグインの日本語化（マルチランゲージ化）

インストールを終えて、プラグインの管理画面を表示します。
[エクステンション - プラグイン管理 - Contents - Code Highlighter(GeSHiPlus2)]


各パラメータを設定して、最後にこのプラグインを有効:●はいにして保存をクリックします。

パラメータ名	意味
Geshi タグ	○pre ○geshi このプラグインを動作させるときに <pre ... > を使って指定するか {geshi ... } を使って指定するか を指定します。
デフォルト背景色	行番号表示時の背景色を指定します。 HTMLでの色空間指定と同じように#RRGGBBで指定します。 RR:赤の度合い(00 - FF) ※必ず２桁指定 GG:緑の度合い(00 - FF) ※必ず２桁指定 BB:青の度合い(00 - FF) ※必ず２桁指定
デフォルト前面色	行番号表示でfancy指定の時の強調行の背景色を指定します。 HTMLでの色空間指定と同じように#RRGGBBで指定します。 RR:赤の度合い(00 - FF) ※必ず２桁指定 GG:緑の度合い(00 - FF) ※必ず２桁指定 BB:青の度合い(00 - FF) ※必ず２桁指定
デフォルト行間	行番号表示でfancy指定の時の強調行の行間隔を指定します。

強調する行間隔を１行毎にしてみます。intervalに2を指定します。

最初と最後の改行までをカットしてみます。allcutにtrueを指定します。

先頭行と最終行の違いに気づいてください。このパラメータを指定するか否かで埋め込む記述が若干見やすくできます。
つまり、preタグを記述したあと、HTMLの中身が見づらくならないように、改行いれても思った位置から表示してくれるものです。
出力タグ形式を"valid"を使ってみましょう。htagにvalidを指定します。


出力されたHTMLを見てましょう。

こんな感じで、現在、このサイトや別のサイトで、使っています。
今のところ、問題はないようです。 もし、ご利用されて不具合など等々ありましたら、ご一報ください。すぐに対応できないかもしれませんが、時間をみて対応したいと思います。

GaSHiの機能を全て使っているわけではありませんが、主要な機能は、使えているのではないかと思います。
また、これで、お気に入りのソースコードの出力ができることを良いですね。


ダウンロード先(GeSHiPus2:改良版)：

コメント