code、pre内のコードを別窓でtextareaに表示させる

Ads

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