XOOPS Cube で、 [code] の内容を別画面で表示可能にする preload と JavaScript

XOOPS Cube には、HTML や PHP コードを示すために使う code という BBcode があります。
この BBcode は最終的には pre タグでマークアップされます。

以前、OCEAN NET の matchan と話していたときに、この code の表示方法にうまいやり方がないだろうかとぃう話になったことがあります。

困っていたポイントは次の 2 点です。
・1 行が長いコードを code で囲うと、レイアウトがくずれる。
・上記を防ぐために幅固定をすると、見づらい

コードの見やすさを取るか、レイアウトが保たれることを取るかの二択だったわけです。

そこで、code の中身を別窓で表示するための preload と javascript を作ってみました。

・ryusXCodePopup.zip

ファイルを解凍すると 3 つのファイルがあります。

XCodePopup.js と blank.html はお使いになってるテーマディレクトリに入れてください。
ryusXCubePopup.class.php は、XOOPS Cube の preload に入れてください。
theme.html の head 内に次の 1 行を足してください。

    <script type=\"text/javascript\" src=\"<{$xoops_imageurl}>XCcodePopup.js\"></script>

これで、code で囲った箇所の上に [popup] が表示されるようになります。
[popup] をクリックすると code の中身が別窓で表示されます。

動作サンプルは、 こちら をごらんください。

別窓で表示する部分は、javascript でやってますので、javascript を工夫すれば、もうちょっと見栄え良くなるかもしれません。