スタッフブログ

  • 最新配信
  • RSS

google-code-prettify for XOOPS XCode

naoto : XOOPS » TIPS小ネタ 2008/8/5 9:00

Blogger's Avatar

こんにちわ2回目のなおとです。
今日はRYUSの伝統?に倣って、XOOPS Hackネタをご披露します。
とはいえ私も若輩の身、お手軽なHTMLテクニックで行きたいと思います。

題のとおりなのですが、google-code-prettifyを使った、プログラム・コードのシンタックス・ハイライトつまり色分けをします。

google-code-prettifyについては1年以上前のマイコミジャーナルの記事、「ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを」が参考になります。
Javascriptでいろいろうまい具合にやってくれて、大変お手軽です。

これを組み込むと、フォーラムやブログで書いた、

 some codes 
といったXCode(XOOPSbbcode、XOOPSコード、BBコード)の記法による出力を対象に、色分けをします。、、のつもりですが今回は手抜きで、コンテンツ中の全てのpre要素に影響します。これでxpwikiなどの整形済み記法とかにも対応できますね!!

それでは今回の肝になる部分ですが、以下の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といったように、できるだけ後のほうになるように指定してください。この方法だと、ブロックのタイトルがどうしても表示されてしまうのが欠点です。。。

表示先のモジュールは「すべてのモジュール」、アクセス権はサイト管理者と登録ユーザとゲスト、つまり全部許可でいいと思います。このあたりは適宜調整してください。


ほかにも、フッターエリアを使う方法も考えられます。ただ、テーマによってはうまくいかないかも知れません。

さて。
ここでたとえば、上記のカスタマイズを一撃でクリアしてくれるようなモジュールを用意しました〜、と言えれば最高だったのですが、そこはそれ。今後の宿題ということで、皆さんもチャレンジしてはいかが?ということでお茶を濁らさせていただきます。

しまらない感じでしたが、じっさい、当ブログのように、頻繁にプログラムを書く人には効果は絶大ですよ。

トラックバック

スタッフブログ最新
カテゴリ一覧

〒104-0061 東京都中央区銀座1丁目3番3号 G1ビル7階
お問い合わせ TEL 03-3524-8860

Copyright(c) 2012 RYUS.All Rights Reserved.