Tema Vanila untuk Tag PRE

Tema Vanila untuk Tag PRE

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