Cara Membuat Syntax Highlighter Sederhana di Blogger

Cara Membuat Syntax Highlighter Sederhana di Blogger [Membuat Tag Pre Pada Blogger]

Halo penikmat pagi

Mungkin teman teman blogger familiar dengan istlah 'tag pre', oke singkat saja tentang tag pre itu

sendiri, <pre> adalah element yang digunakan untuk merepresentasikan sebuah blok/teks preformat . Teks yang ditulis di dalam <pre> elemen memiliki struktur berdasarkan ketetapan tifografi, artinya teks ditulis apa adanya sesuai format yang ditulis di dalam file (dokumen html).

Oke sekarang kita lanjut cara membuat nya, cari kode ]]></b:skin>  kemudian copy-paste code di bawah ini di atas kode berwarna merah tersebut.

  pre {
  background-color: #5e8cab;
  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: #000000;
}
pre .line-number {
  float: left;
  margin: 0 1em 0 -1em;
  color: #ecf0f1;
  background-color: #4f575e;
  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;
}

Kemudian masukan  kode dibawah ini tepat di atas kode </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>

Kemudian untuk menampilkan tag pre pada postingan di blog, maka buat postingan baru kemudian ketik seperti ini dalam html kalian.

<pre data-codetype="JPHTML" title=""><code class="language-markup">disini untuk melatakan code kalian  </code></pre> 

buat postingan baru kemudian ketik seperti gambar di atas

Semoga bermanfaat dan salam morning ...

Mari berlangganan untuk menerima pembaruan email gratis dari kami: