JSのgoogle-code-prettifyを使ったシンタックスハイライト。

適用するには、<pre class="prettyprint">...</pre> か <code class="prettyprint">...</code>で囲み、idで言語を指定します。行ごとの色分けをする場合は、さらにclassに"linenums"を加えます。

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>