Cara Membuat Syntax Highlighter Sederhana di Blogger - PenyairCoding (Bergerak & Kemudian Terjadi)
Latest Post
Tunggu...

Rabu, 23 Oktober 2019

Cara Membuat Syntax Highlighter Sederhana di Blogger

Cara Membuat Syntax Highlighter Sederhana pada Blog.

Apa itu Tag Pre atau Syntax Highlighter, mereka 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. Mudah nya apapun bentuk teks jika dimasukan kedalam 'pre' maka hasilnya berupa bentuk aslinya, contoh seperti file .html atau yang lainnya. Maka apabila kita menggunakan element 'pre' maka hasil nya seperti pada gambar dibawah ini.

Gambar diatas merupakan hasil ketika kita menggunakan element 'pre'
Lalu bagaimana cara membuatnya, oke kita langsung kita coba. 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 pilih HTML kemudian ketik seperti ini dalam html kalian.
<pre>disini untuk melatakan code kalian  </pre>
Good luck, semoga berhasil ...

    Choose :
  • OR
    To comment
Tidak ada komentar:
Write comments