Edit in JSFiddle

$('pre').each(function() {
    $(this).addClass('viewplain').append('<a href="#" class="plain">View 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 = "Plain Code";
    return false;
});

body {padding:30px;}

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>