$('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(); pl.document.write('<textarea style="width:100%;height:270px;" spellcheck="false">' + output + '</textarea>'); pl.document.title = "コードを表示しています"; return false; });
body {padding:30px;background:#fff;} pre { background-color:#efefef; border:1px solid #ddd; padding:10px 15px; white-space:pre; word-wrap:normal; margin-bottom:10px; } pre code { color:black; font:normal 12px 'Courier New',Monospace; } pre.viewplain {position:relative;} pre.viewplain a.plain { position:absolute; top:4px; right:5px; font:normal 10px Arial,Sans-Serif; color:blue; }
<pre><code>.foo{ color:#eee; background:#fff; }</code></pre> <pre><code>function alert() { alert('foo!'); }</code></pre>