Tema Vanila untuk Tag PRE
Tabel Konten
- HTML
- CSS
HTML
<pre data-title="HTML"> ... </pre>
<pre data-title="CSS"> ... </pre>
<pre data-title="JavaScript"> ... </pre>
<pre data-title="jQuery"> ... </pre>
<pre data-title="PHP"> ... </pre>
<pre data-title="XML"> ... </pre>
CSS
pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:normal bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;
position:relative;
padding:0 7px;
margin:10px 0;
overflow:auto;
word-wrap:normal;
white-space:pre;
-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;
}
pre[data-title] {
padding:29px 1em 7px 1em;
}
pre[data-title]::before {
content:attr(data-title);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}
pre[data-title="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-title="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-title="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-title="jQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-title="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-title="XML"] {border-color:#FF0C39;color:#790015;}
pre[data-title="HTML"]::before {background-color:#0B7E88;}
pre[data-title="CSS"]::before {background-color:#7B990C;}
pre[data-title="JavaScript"]:before {background-color:#545448;}
pre[data-title="jQuery"]::before {background-color:#395540;}
pre[data-title="PHP"]::before {background-color:#FF9900;}
pre[data-title="XML"]::before {background-color:#FF0C39;}
Lihat Demo
8 Komentar
Surga Kenari
segerr..
Beben Koben
urusan tag pre buat tampilan kode2an gak ada yg ngalahin pluginan dah :Ozz
Bayu Handono
wah lebih keren dari yang pernah di post dulu. tapi ambil warnanya aja deh, keren :)
Anonim
Nais info gan haha :-bd
Bakteri
mantap bg taufic :-bd
Anonim
mas ini gimana yah settingnya kalo kodenya pecah ?
Taufik Nurrohman
Cuma salah menulis kode HTML saja. Coba dicari dulu.
Hakim
Mantap bener mas :-bd sudah saya terapin di blog, makashi ya mas