Cara membuat Syntax Highlighter Otomatis berwarna keren di Blogger
Kali ini Admin akan membuatkan tutorial mengenai cara memasang syntax highlight js otomatis di blogger/blogspot.syntax Highloghter merupakan salah satu script yang dapat membuat suatu kode menjadi berwarna warni.
Penerapan kode warna warni atau disebut juga kotak pembungkus script ini, bisa kita lihat pada blog blog yang berisi konten tutorial dan tips mengenai blogger ataupun bahasa pemograman yang didalam artikel tersebut membagikan script HTML, CSS, JavaScript, jQuery dan lain sebagainya.
Fungsi membuat Syntax Highligh atau Pembungkus Script sebagai berikut :
- Memperindah tampilan kode pada artikel bog
- Membuat pembaca merasa nyaman membaca tutorial pada postingan
- Memasang syntax highlighter pada blogger juga dimaksudkan agar pembaca blog lebih mudah mengenal jenis jenis kode yang dibagikan dalam artikel blog
- Menjadikan blog atau website tampak lebih Profesional dalam tutorial yang kamu buat
1.Memperindah tampilan kode
2.Membuat pembaca menjadi nyaman
3.menjadikan blog terlihat profesional
Dari tujuan diatas, penggunaan Syntax Highligh sangat cocok digunakan oleh blogger yang mempunyai niche blog yang jelas seperti niche teknologi dan blogging
Baca Juga : Membuat animasi efek bergetar saat gambar disentuh cursor
Namun, tidak disarankan bagi pemilik blog berbagai niche alias blog gado gado untuk memasang pembungkus script ini, selain jarang membuat tutorial yang mengharuskan membagikan kode, penggunaan script yang berlebihan juga berdampak pada kecepatan blog kamu
Ada beberapa gaya dari Syntax Highlighter ini, namun yang admin berikan disini adalah hasil dari Alex Gorbatchev yang dikenal denngan kode bernama Scipt Stabilo Syntacs
Perlu kamu ketahui, Syntax Highlight merupakan Tool pengganti fungsi Blockquote atau Kotak Quotes
Karena sama sama kita ketahui bahwa blockquote tidak memiliki fitur warna warni untuk kode script yang dibagikan, maka perlu bagi kita menggunakan syntax highligh ini sebagai gantinya
Dari info diatas, jika kamu benar benar pengen menggunakan Syntax Highlighter ini, berikut caranya.
Lainnya : Membuat Tool daftar kode warna- (color picker) di blog
Cara Memasang Syntax Highlighter di Blogger/Blogspot
Langkah 1
Masuk ke blogger.com kemudian pada Dashboard blog kamu, masuk ke Tema > Edit HTML
Kemudian, cari kode </head> atau <head/>, jika belum ketemu coba cari <!--<head/>--></head>
Letakkan kode dibawah ini diatas kode </head> tadi
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) };loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/googlecode.min.css");
//]]>
</script>Pada bagian kode yang ditandai diatas, itu adalah style CSS atau tampilan dan gaya dari highligh.js
Kamu bisa mengubah atau memilih style CSS lain DISINI, untuk tutorial ini admin menggunakan tampilan css googlecode
Kamu bisa merubah stylenya menjadi yang kamu suka, silahkan ganti kode googlecode pada script diatas dengan style yang di inginkan, misalnya kamu menyukai style pembungkus kode dari Github Gist, maka kamu hanya tinggal mengganti bagian googlecode dengan github-gist
Selain itu, kamu bisa juga bisa memilih style yang cocok dengan blog mu dari highlight.js ini
Langkah 2
Untuk membuat syntax highligh berwarna otomatis, cari kode </body> atau <!--</body>--></body> dan tambahkan kode berikut di atas kode tadi
<b:if cond='data:view.isPost'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>
</b:if>Langkah 3
Berikutnya kita akan memasang CSS yang berguna untuk mengatasi tampilan syntax highlight jika berantakan ketika JavaScript dan highlight.js belum selesai di load
Untuk mengatasi tampilan berantakan pada pembungkus kode tersebut, silahkan cari kode </b:skin> atau kode </style>, kemudian taruh kode CSS berikut tepat diatas kode tadi
/* Highlight CSS */ code,pre,pre code{font-family:Consolas,Monaco,'Andale Mono',monospace;word-spacing:normal;font-size:14px;line-height:1.3em;} pre code{padding:20px!important;margin:20px auto 50px;background-color:#fff!important;box-shadow:0 9px 19px 7px rgba(0,0,0,.04),0 10px 17px -2px rgba(0,0,0,.070);border-top:1px solid rgba(0,0,0,0.02);} .post-body code{color:#e20d58}
Misal
(letakkan kode disini)</b:skin>
Atau
(highligh css disini) </style>
Oh iya, kamu juga bisa mengganti warna syntax diatas, ganti kode #e20d58 dan ganti kode #fff dengan warna background yang ingin kamu inginkan , untuk melihat kode warna HTML, silahkan lihat pada halaman ini
Langkah 4
Simpan/Save template
Baca Juga : Download template mirip Viomagz gratis,mau nggak?
Cara Menggunakan Syntax Highlight.js otomatis di Blogger/Blogspot
Agar script highlight.js bekerja dengan baik dan kode yang dimasukkan juga berwarna otomatis, maka perlu menggunakan format khusus, sebagai berikut
<pre><code>Letakkan Kode CSS,JavaScript,jQuery disini
</pre></code>
Begitu format agar scriptnya bekerja, intinya, taruh tag pembuka <pre><code> sebelum script yang ingin dimasukkan, dan tutup dengan tag penutup </pre></code>
Tidak hanya bisa dipasang pada postingan blog, syntax highligh atau kotak script ini bisa juga digunakan di komentar bawaan Blogger, agar bekerja dengan baik, mmasukkan format dibawah pada komentar
<i rel="pre"> masukkan kode kamu disini </i>Untuk demo penggunaannya, coba tes masukkan kode di komentar artikel yang kamu baca ini, kira kira mirip mirip begitulah penerapan pemasangan pembungkus kode ini, tapi karena blog ini menggunakan syntax bawaan template, mungkin tidak sepenuhnya sama, tapi mirip miriplah
Oke, Demikianlah cara membuat Syntax Highlighter dan cara memasangnya di blogger, semoga blog kamu dapat memasang syntax highlighter ini
