Cool Tag Pre

Sebuah blog atau web tutorial tidak akan pernah lepas dari hal yang satu ini, pada pencarian Google banyak sekali jenis Tag Pre yang di sajikan secara lengkap dengan cara pemasangannya oleh para sobat blogger Indonesia maupun Mancanegara, Pembuatan Tag Ppre itu sendiri mungkin ditujukan agar pembaca atau audiens sebuah blog dapat lebih cepat memahami serta membedakan antar kode yang di sajikan baik itu CSS, HTML, jQuery dan yang lainnya.

Penggunaan Tag Pre juga akan sedikit memperindah tampilan sebuah kode, bentuk dari Tag Pre yang akan saya sajikan berikut ini adalah bukan hasil karya pribadi saya sepenuhnya, sumber kode tersebut di ambil dari http://dte.web.id dalam artikelnya "Tema Vanila untuk Tag PRE" kemudian sedikit gaya saya edit warnanya dan lagi-lagi saya menambah kode penomoran otomatis juga hasil karya Taufik Nurrohman di blog http://dte.web.id.

Dan jika sobat ingin mengetahui lebih jauh apa itu Tag Pre dan apa aja unsur-unsur didalamnya silakan sobat blogger kunjungi blognya Kang Ismet pada artikel tentang "Mengenal Tag Pre"

Untuk penulisannya pada postingan kodenya seperti ini

<pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre> 

Berikut CSS'nya letakan di atas /]]></b:skin> atau </style>

pre {
  background-color: #233948;
  font: bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  color: #333;
  border: 1px solid #f1c40f;
  position: relative;
  padding: 0 7px;
  margin: 10px 0;
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  position: relative;
}
pre[data-codetype] {
  padding: 23px 1em 7px 1em;
}
pre[data-codetype]:before {
  content: attr(data-codetype);
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #95a5a6;
  padding: 0 7px;
  font: bold 12px/20px Arial,Sans-Serif;
  color: white;
}
pre[data-codetype="HTML"] {
  border-color: #27ae60;
  color: #8FE6B3;
}
pre[data-codetype="CSS"] {
  border-color: #16a085;
  color: #7DDECA;
}
pre[data-codetype="JavaScript"] {
  border-color: #2980b9;
  color: #91C8ED;
}
pre[data-codetype="JQuery"] {
  border-color: #34495e;
  color: #889CAF;
}
pre[data-codetype="HTML"]:before {
  background-color: #27ae60;
}
pre[data-codetype="CSS"]:before {
  background-color: #16a085;
}
pre[data-codetype="JavaScript"]:before {
  background-color: #2980b9;
}
pre[data-codetype="JQuery"]:before {
  background-color: #34495e;
}
pre code, pre .line-number {
  display: block;
  font: normal normal 12px/15px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color: #006699;
}
pre .line-number {
  float: left;
  margin: 0 1em 0 -1em;
  color: #ecf0f1;
  background-color: #243342;
  border-right: 2px solid #3E5770;
  text-align: right;
  min-width: 2.5em;
}
pre .line-number span {
  display: block;
  padding: 0 .5em 0 1em;
}
pre .line-number span:nth-child(even) {
  background-color: #243342;
}
pre .cl {
  display: block;
  clear: both;
}

Terakhir masukan JavaScript berikut ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j < num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j+1) + '</span>';
        }
    }
})();
//]]>
</script>

Sekian Dan Terimakasih Telah Melihat Artikel Cool Tag Pre

Sumber :http://the-anarchyta.blogspot.com/2014/02/cool-tag-pre.html