スタッフブログ
こんにちわ2回目のなおとです。
今日はRYUSの伝統?に倣って、XOOPS Hackネタをご披露します。
とはいえ私も若輩の身、お手軽なHTMLテクニックで行きたいと思います。
題のとおりなのですが、google-code-prettifyを使った、プログラム・コードのシンタックス・ハイライトつまり色分けをします。
google-code-prettifyについては1年以上前のマイコミジャーナルの記事、「ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを」が参考になります。
Javascriptでいろいろうまい具合にやってくれて、大変お手軽です。
これを組み込むと、フォーラムやブログで書いた、 some codes
それでは今回の肝になる部分ですが、以下のJavascript等の固まりを、HTMLの「できるだけ後のほう」に組み込めばミッション・クリアです。
その前に、外部jsと外部cssファイルは上記リンク先から入手して、サーバにアップロードしておいてくださいね。
<script src="/themes/prettify.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/themes/prettify.css" />
<script type="text/javascript">
// fetch a list of nodes to rewrite
var preXCodeSegments = document.getElementsByTagName('pre');
for (var i = 0; i < preXCodeSegments.length; ++i) {
preXCodeSegments[i].className = 'prettyprint';
}
prettyPrint();
</script>
方法その1 テーマで
XOOPS_ROOT_PATH/themes/[mytheme]/theme.html
を書き換えます。詳細の説明は省きます。当サイトではこの手法でやっています。
方法その2 カスタム・ブロックで
管理メニューに入って、「互換モジュール >> ブロックの管理」画面の、「カスタムブロック追加」ボタンからはじめます。もちろんaltsysを使ってもかまいません。
で、上のカコミの中身をHTML(無変換)でコンテンツエリアに書きます。
タイトルは好きにしてかまいません。ただ、表示サイドは必ず「サイドブロック 右」で、並び順も99といったように、できるだけ後のほうになるように指定してください。この方法だと、ブロックのタイトルがどうしても表示されてしまうのが欠点です。。。
表示先のモジュールは「すべてのモジュール」、アクセス権はサイト管理者と登録ユーザとゲスト、つまり全部許可でいいと思います。このあたりは適宜調整してください。
ほかにも、フッターエリアを使う方法も考えられます。ただ、テーマによってはうまくいかないかも知れません。
さて。
ここでたとえば、上記のカスタマイズを一撃でクリアしてくれるようなモジュールを用意しました〜、と言えれば最高だったのですが、そこはそれ。今後の宿題ということで、皆さんもチャレンジしてはいかが?ということでお茶を濁らさせていただきます。
しまらない感じでしたが、じっさい、当ブログのように、頻繁にプログラムを書く人には効果は絶大ですよ。