Rainbow 
http://craig.is/making/rainbows

JSとCSSだけ設置のシンプルなコードビュー

ほとんど「Crayon Syntax Highlighter」が有名だと思いますが、私はこれが気にいっています。
上記のサイトからコピーして貼付けるだけで下記のように色分けしたコードが表示されます。

JSをダウンロードしたら、以下のgithubから該当のCSSをDLして付けるだけ。
ちなみに私のは「github.css」を利用させてもらっています。
github

しかしこのままだとHTMLコードは横幅を超えて表示されるので、preとcodeに「overflow: auto;」を追加。

pre {
/*〜〜〜*/
overflow: auto;
}
code {
/*〜〜〜*/
overflow: auto;
}

■HTMLのコードの見え方

よしだのブログ













 


        

■cssのコードの見え方

/* ---------------------------------------------
	#header >
--------------------------------------------- */
#header .header-menu a{
	color:#FFFFFF;
}
#header .header-menu h1{display:inline;float:right;padding:5px 20px;
	font-size:12px;
	border-left:#CFCFCF 1px solid;
	border-right:#CFCFCF 1px solid;
}
#header .header-menu ul{
	border-left:#CFCFCF 1px solid; float:left;
}
	#header .header-menu li{display:inline;float:left;padding:5px 20px;
		font-size:12px;
		border-right:#CFCFCF 1px solid;
	}
#header .header-menu ul:after {display: block;content: '';clear: both;}

■Javascriptのコードの見え方

Rainbow.color(function() {
    console.log('the new blocks are now highlighted!');
});

■phpのコードの見え方

function test(){
 print 'TEST';
 return 'test';
}