Saturday, 16 July 2016

Cara Mudah Membuat Syntax Highlighter Pada Blog Terbaru


Cara Mudah Membuat Syntax Highlighter Pada Blog Terbaru

Cara Mudah Membuat Syntax Highlighter Pada Blog Terbaru - Pasti bagi sebagian Blogger kata kata Syntax Highlighter masih asing ya di mata kalian. Karena memang kata katanya yang susah. Biasanya Blogger sering menyebut Syntax Highlighter ini dengan sebutan Kotak Script atau semacamnya..

Sekilas tentang Syntax Highlighter...

Syntax Highlighter adalah salah satu script yang dapat membuat kode menjadi warna-warni sesuai dengan namanya Highlighter~ Kode warna-warni tersebut biasa kita lihat pada blog yang berisi konten tutorial atau berbagi tips tentang blogger yang di dalamnya terdapat script HTML, JavaScript, jQuery dan lain sebaigainya.

Selain mempercantik barisan kode pada postingan blog, penggunaan Syntax Highlighter juga dimaksudkan agar pembaca dapat dengan mudah mengenal jenis kode yang diberikan oleh si penulis. Dan tentunya pengunjung akan merasa nyaman membaca konten kita, dan bagi si penulis Blog, akan membuatnya menjadi lebih professional.

Baca Juga : Cara Memasang Tombol Share Melayang di Blog

Cara Mudah Membuat Syntax Highlighter Pada Blog Terbaru


Sebenarnya pada Blog kalian sudah terpasang Syntax Highlighter loh, cara penggunaannya adalah dengan menerapkan kode <pre><code>---ISI KODE--</code></pre> di dalam artikel Blog pada mode HTML akan tetapi tampilannya tidak semenarik ini..


akan tetapi seperti ini, polos~ masih belum bisa disebut Syntax Highlighter.


Jadi sekarang, kita akan membuat tampilannya layak disebut sebagai Syntax Highlighter!
  • Oke langsung saja menuju Blogger ► Template ► Edit HTML
  • Cari kode </style> dengan menggunakan CTRL + F untuk memudahkan pencariannya, lalu letakkan kode CSS dibawah ini tepat diatas kode </style> . Kode dibawah ini gunanya adalah untuk mempercantik tampilan kotak Syntax Highlighter nantinya.
/* CSS Syntax Highlighting */
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#222;color:white}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#222}
.hljs-addition{background-color:#a2fca2;color:#222}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}

  • Dan letakkan juga kode jQuery ini sebelum kode </body> ini bertujuan supaya nanti kode yang ada di dalam kotak Syntax Highlighter bisa di Double Click. Mau liat contoh double clicknya akan seperti apa? coba kalian double click kode jQuery dibawah ini. 
<script type="text/javascript">
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>
  • Simpan Template.

Cara Membuat Syntax Highlighter Pada Artikel Blog

Sekarang kita akan menerapkan cara membuat kotak Syntax Highlighter ini pada artikel Blog.
  • Disaat kita membuat artikel pilihlah mode HTML untuk membuat kotak Syntax Highlighter.

  • Kalian tinggal memasukkan kode berikut ini, dan silahkan ganti isi kode di sini dengan kode (HTML, CSS, JavaScript, jQuery) yang ingin kalian bagikan. 
<pre><code>---ISI KODE DI SINI--</code></pre>

  • Jika kodenya berupa HTML,Javacsript,dan jQuery silahkan di Parse terlebih dahulu kodenya sebelum memasukkannya ke mode HTML. Parse disini 
Kenapa kode berupa HTML,Javascript, dan jQuery harus diparse terlebih dahulu? Dengan melakukan HTML Parsing ini, maka akan mencegah tampilan kode yang tidak muncul pada saat membagikan kode tersebut. Coba ajadeh misal kalian memasukkan kode HTML,Javascript, dan jQuery yang tidak di parse sebelum memasukkannya ke mode HTML artikel, pasti pada mode bagian Compose kode tersebut tidak muncul.

Sekian Cara Mudah Membuat Syntax Highlighter Pada Blog Terbaru semoga berhasil diterapkan pada blog kalian, jika ada kesulitan silahkan ajukan pertanyaan di kolom komentar.

bangbil.com adalah sebuah personal blog. Seorang blogger yang masih merangkap sebagai pelajar. Temui aku di Sosial Media :

Berlangganan via Email

Berlangganan artikel terbaru dari blog ini langsung via email.