Result
SyntaxHighlighterによく付いてるやつ。
これ自体需要は少なそうだけど応用すれば一般向けに使えそうです。
jQuery
$('pre').each(function() { //別窓表示させるためのリンクを付与 $(this).addClass('viewplain').append('<a href="#" class="plain">別窓で開く</a>'); }); $('a.plain', 'pre').click(function() { //別窓のウィンドウサイズ設定 var pl = window.open('', '', 'status=0, resizable=0, width=600, height=300, top=50, left=100'), output = $(this).parent().find('code').html(); //textareaにコードを表示させる pl.document.write('<textarea style="width:100%;height:270px;" spellcheck="false">' + output + '</textarea>'); pl.document.title = "コードを表示しています"; return false; });
html
<pre><code>.foo{ color:#eee; background:#fff; }</code></pre>
via
via:http://hompimpaalaihumgambreng.blogspot.jp/2012/05/view-plain-code.html