SyntaxHighlighterを使って、ソースコードをシンタックスハイライト表示。きれいに表示してくれますが、各表示言語ごとに、専用のjsファイルを読み込む必要があります。xml、html、javascript、css、PHP、Perl、Ruby、javaなど。表示スタイルのテーマもあらかじめ17種類用意されています。適用するには、<pre class="brush: js;" >などと、クラス名とタイプを指定します。

js

$(function(){
	$('#hoge').click(function() {
		$('#hoge').animate({opacity: "0"},300,function(){
		$('#hoge').animate({opacity: "1"},300 ) .text($('#ew01').val());
		$('#hoge').css("color","red"); 
		});
	});
});

css

pre	
	{
		display:block;
		padding:10px;
		white-space: normal;
		border:1px solid #bae2f0;
		background:#e3f4f9;
		margin:.5em 0;
		font-size: 12px;
		overflow: auto;
		width:400px;
	}

html

<div class="cont02">
	<ol>
		<li><span id="sst01">緑色の文字部分を</span>　<span id="btn01"><a href="#">文頭へ移動</a></span>　
		<li><span id="sst02">青色の文字部分を</span>　<span id="btn03"><a href="#">文頭へ移動</a></span>　
		<li><span id="sst03">赤色の文字部分を</span>　<span id="btn05"><a href="#">文頭へ移動</a></span>　
		<li><span id="sst04">橙色の文字部分を</span>　<span id="btn07"><a href="#">文頭へ移動</a></span>　
	</ol>
</div>

JS SyntaxHighlighterを使って、ソースコードを見やすくハイライト表示。

js

css

html