codeFormatter

by LimitedWard

HTML

<div class="ribbon-wrapper">
    <div class="ribbon-front">testtestsetsetsetsetsetsetsetsetset</div>
    <div class="ribbon-edge-topleft"></div>
    <div class="ribbon-edge-topright"></div>
    <div class="ribbon-edge-bottomleft"></div>
    <div class="ribbon-edge-bottomright"></div>
</div>
<div class="codeblock"> <pre><code><!--
<html>
    <head></head>
    <body></body>
</html>
--></code></pre>

</div>

CSS

/*div.codeblock {
    padding:10px;
    margin:25px;
    background: #ccc;
}*/

/* ribbon style */
 .ribbon-wrapper {
    position: relative;
    -moz-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
    -webkit-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
    -moz-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
    -webkit-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
}
.ribbon-front {
    background-color: rgb(200,200,50);
    height: 80px;
    width: 100%;
    position: relative;
    left:0px;
    z-index: 2;
}
.ribbon-front {
    -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.55);
    -khtml-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.55);
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.55);
    -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.55);
}
.ribbon-edge-topleft, .ribbon-edge-topright, .ribbon-edge-bottomleft, .ribbon-edge-bottomright {
    position: absolute;
    z-index: 1;
    border-style:solid;
    height:0px;
    width:0px;
}
.ribbon-edge-topleft, .ribbon-edge-topright {
}
.ribbon-edge-bottomleft, .ribbon-edge-bottomright {
    top: 80px;
}
.ribbon-edge-topleft, .ribbon-edge-bottomleft {
    left: 0px;
    border-color: transparent rgb(240,200,0) transparent transparent;
}
.ribbon-edge-topleft {
    top: 0px;
    border-width: 0px 20px 0 0;
}
.ribbon-edge-bottomleft...

JavaScript

$(document).ready(function () {
    var $codeblocks = $('div.codeblock');
    $codeblocks.find('code').html($codeblocks.find('code').html().replace(/</g, '&lt;').replace(/>/g, '&gt;').replace('&lt;!--\n', '').replace('\n--&gt;', ''));

    var $ribbonelem = $('<div class="ribbon-wrapper">\
		<div class="ribbon-front"/>\
		<div class="ribbon-edge-topleft"/>\
		<div class="ribbon-edge-topright"/>\
		<div class="ribbon-edge-bottomleft"/>\
		<div class="ribbon-edge-bottomright"/>\
	</div>').appendTo($('body'));

    $ribbonelem.find('.ribbon-front').append($codeblocks);
});