jQuery linenumberwriter.jsを使って、ソースコードを見やすく表示。

linenumberwriter.jsを使って、ソースコードを行番号を付けてみやすく表示。コードのカラーリングはありませんが、その分、各表示言語ごとの専用ファイルは不要です。<pre><code>から</code><pre>まででマークアップされているコードが自動的に変換の対象となります。「plain text」タブを選ぶとソースを拾えます。
参考：http://likealunatic.jp/2008/04/04_linenumberwriter.php

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>