Membuat Tag Pre Keren

Membuat Tagpre Keren - Sebuah blog atau web tutorial tidak akan pernah lepas dari hal yang satu ini, pada pencarian Google banyak sekali jenis tagpre yang disajikan secara lengkap dengan cara pemasangannya oleh blogger-blogger Indonesia maupun Mancanegara, Pembuatan Tagpre itu sendiri mungkin ditujukan agar pembaca atau audiens sebuah blog dapat lebih cepat memahami serta membedakan antar kode yang disajikan baik itu CSS, HTML, jQuery dan yang lainnya.
Penggunaan Tagpre juga akan sedikit memperindah tampilan tempat sebuah kode disimpan, bentuk dari tagpre yang akan saya sajikan berikut ini adalah bukan hasil karya pribadi saya sepenuhnya, sumber kode tersebut saya ambil dari mas Taufik Nurrohman dalam blognya www.dte.web.id dalam artikelnya "Tema Vanila untuk Tag PRE" kemudia saya edit sedikit warnanya dan lagi-lagi saya menambah kode penomoran otomatis juga hasil karya Mas Taupik Nurrohman.
Dan jika sobat ingin mengetahui lebih jauh apa itu tagpre dan apa aja unsur-unsur didalamnya silakan sobat blogger kunjungi blognya Kang Ismet pada artikel tentang "Mengenal Tag Pre "

LIHAT DEMONYA

INTRUKSI PEMASANGAN KODE

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

 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;
}

 <script type='text/javascript'>
(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>

Demikian artikel tentang pembuatan tagpre keren, dan semoga artikel ini bermanfaat.