JQuery View Plain

by Taufik Nurrohman

HTML

<blockquote><code>function babibu() {<br>
&nbsp;&nbsp;&nbsp;&nbsp;document.write('Huatchuuu!!!');<br>
&nbsp;&nbsp;&nbsp;&nbsp;var re = document.getElementById('brot').innerHTML;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;re = re.replace(/brot/ig, "brobot-brobot");<br>
}</code></blockquote>

<blockquote><code>function alert() {<br>
&nbsp;&nbsp;&nbsp;&nbsp;alert('ARRGGHHHHH!!!!');<br>
}</code></blockquote>

CSS

body {padding:30px;}

blockquote {
  background-color:#E9BD00;
  border-left:4px solid #E89B00;
  padding:10px 15px;
  margin-bottom:10px;
  overflow:auto;
}

blockquote code {
  color:black;
  font:normal 12px 'Courier New',Monospace;    
}

blockquote.viewplain {position:relative;}

blockquote.viewplain a.plain {
  position:absolute;
  top:4px;
  right:5px;
  font:normal 10px Arial,Sans-Serif;
  color:blue;    
}

JavaScript

$('blockquote').each(function() {
    $(this).addClass('viewplain').append('<a href="#" class="plain">View Plain</a>');
});

$('.plain', 'blockquote').click(function() {
    var pl = window.open('', '', 'status=0, resizable=0, width=600, height=300, top=50, left=100'),
        output = $(this).parent().find('code').html().replace(/(<br>|<br\/>|<br \/>)/g, "");
    pl.document.write('<textarea style="width:100%;height:270px;" spellcheck="false">' + output + '</textarea>');
    pl.document.title = "Plain Code";
    return false;
});