シングスブログ

中小企業のマーケティングやブランディングのコンサルティング。事業運営、組織運営のPDCA改善やホームページの制作、ウェブサイト改善などITネット活用を中心にサービスを提供しています。

メニュー

プログラムのコードに色を付けるライブラリ「google-code-prettify」を導入

HTMLページに表示したプログラムのコードに色を付けるライブラリ「google-code-prettify」を導入。サンプルをみると、CやJavaをはじめ、HTML、XML、CSS、Javascript、Ruby、PHP、Perl、Python、SQLなどCやBash、XMLライクの言語に対応。

導入方法は、こちらを参考に。

まず、ソースコードをダウンロードして、prettify.css と prettify.js をftpでサーバにアップロード。

そして、アップロードしたライブラリをサーバのパスにあわせてHTMLのHEAD要素内に記述。

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

BODY要素にも。

<body onload="prettyPrint()">

以下はIEと相性が悪いようだ。何かとバッティングしてエラーをはき出す。(追記2009-11-11)

または、イベントリスナーで呼び出す場合。

<script type="text/javascript">
try{
window.addEventListener("load",prettyPrint,false);
}catch(e){
// IE
window.attachEvent("onload",prettyPrint);
}
</script>

あるいは、直接呼び出しで。

<script type="text/javascript">
prettyPrint();
</script>

使い方はいたって簡単。precodeタグにclass名「prettyprint」を付けるだけで色を付けてくれる。

早速、色分けてくれた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です