Xivanki Share !!: Membuat Cool Tag Pre Syntax Highlight

Membuat Cool Tag Pre Syntax Highlight - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Membuat Cool Tag Pre Syntax Highlight !! Semoga tulisan dengan kategori blogging !! css !! tutorial !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Membuat Cool Tag Pre Syntax Highlight ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Sebuah blog tutorial apalagi blog tentang codung pastinya selalu memiliki 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>

Demikian artikel tentang mengenai Cool Tag Pre, dan semoga menambah cantik blog sobat..