Simple Theme tag PRE

Simple Theme tag PRE

Postingan ini saya buat karna terinspirasi dari postinagan Blog DTE yang menurut saya dari segi tampilan itu sangat mengagumkan,dan karna itu saya jadi terdorong untuk membuat tampilan tag PRE yang lebih Simple yang temanya saya ambil dari Blog ini.

Demo

pre {
width:660px;
font:normal bold 12px/15px Inconsolata,Monaco,Consolas,"Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
background:#393939;
word-break:break-all;
word-wrap:break-word;
white-space:pre;
color:#fff;
border-left:3px solid #fff;
overflow:auto;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
padding:30px 10px 20px 40px;
}

pre:before {
content:"";
position:absolute;
top:10px;
left:10px;
font-size:14px;
font-weight:700;
font-family:Helvetica, Arial, sans-serif;
-webkit-font-smoothing:antialiased;
}

pre.css {
color:#7B990C;
border-left:3px solid #7B990C;
}

pre.css:before {
content:"CSS";
position:absolute;
top:10px;
left:10px;
font-size:14px;
font-weight:700;
font-family:Helvetica, Arial, sans-serif;
-webkit-font-smoothing:antialiased;
}

pre.html {
color:#0B7E88;
border-left:3px solid #0B7E88;
}

pre.html:before {
content:"HTML";
position:absolute;
top:10px;
left:10px;
font-size:14px;
font-weight:700;
font-family:Helvetica, Arial, sans-serif;
-webkit-font-smoothing:antialiased;
}

pre.js {
color:#aeb0ad;
border-left:3px solid #aeb0ad;
}

pre.js:before {
content:"JS";
position:absolute;
top:10px;
left:10px;
font-size:14px;
font-weight:700;
font-family:Helvetica, Arial, sans-serif;
-webkit-font-smoothing:antialiased;
}

<pre class="html">  ... </pre>
<pre class="css"> ...  </pre>
<pre class="js"> ...  </pre>