以下参照
google-code-prettify で ソースコード表示 を修飾
最近、Nucleusのカスタマイズに関してここのブログに大変お世話になっています。
僕も誰かの役に立てるような情報を残せるように、早くなりなさい。
google-code-prettify導入後、色合いが背景と会わなかったのでスタイルシートの背景色を若干修正。
よし、これでOK。
これを参考にMODxのサイトにも導入してみた。
prettify.css と prettify.jsは（MODxインストールディレクトリ）/assets/jsと（MODxインストールディレクトリ）/assets/cssに設置。cssディレクトリは無かったので新たに作りました。ようは見えるところにあればどこでもいい。
個別のドキュメントに一つずつ修正を加えるのはもちろんナンセンスなので、共通のテンプレートの<head>内に以下のコードを追加します。prettify.cssとprettify.jsへのリンクは各自の環境にあわせましょう。
<!-- google-code-prettify -->
<link href="/assets/css/prettify.css" rel="stylesheet" type="text/css"/>
<script src="/assets/js/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
function prettyPrepare() {
var o = document.getElementsByTagName("pre");
for (var i=0; i<o.length; i++) {
if (o[i].firstChild.tagName.toLowerCase() == "code") o[i].firstChild.className = "prettyprint";
}
}
</script>
そしてbodyタグを修正。
<body onload="prettyPrepare();prettyPrint();">
以上。 最近、人のふんどしで相撲取りすぎだな。。
追記
IEでの利用に不具合が発覚しました。 詳しくは次の記事を参照してください。 今のところ解決法は見つかっておらず、IEのみオフになるようにしています。
トラックバック:No Trackbacks
- トラックバック URL
- http://blog.garden-place.jp/action.php?action=plugin&name=TrackBack&tb_id=80
- Listed below are links to weblogs that reference
- [Nucleus][MODx]google-code-prettifyでソースコードの色分け表示 from Web 酒 肴
このエントリにトラックバックはありません
このトラックバックURLを使ってこの記事にトラックバックを送ることができます。
もしあなたのブログがトラックバック送信に対応していない場合にはこちらのフォームからトラックバックを送信することができます。.