Hallo!
Kalian kepengen tau gmana caranya buat highlighter? atau belum tau apa itu highlighter? di artikel-artikel gw yang membahas kode seperti html atau css atau pemrograman, gw pasti pakai yang namanya highlighter ini. Tampilannya terlihat beda dengan tulisan biasanya dan memudahkan orang untuk melihat sekaligus menyalinnya.
Ya, seperti itulah yang dinamakan highlighter dan tampilan seperti itu yang biasa gw pake di artikel-artikel yang membahas tutorial dalam blogging atau pemrograman. Ketika melihatnya, kalian penasaran gmana cara penerapannya? kok bisa jadi kyak gitu? Tenang, di artikel ini gw bakalan kasi tau kalian gmana membuat highlighter seperti itu. Pembuatan highlighter ini tidak menggunakan web/aplikasi pihak ketiga ya.. Jadi, kalian tinggal ikuti tutorial kali ini, dan nanti kalau kalian ingin menggunakannya dalam sebuah artikel, kalian tinggal panggill kodenya saja dengan sangat singkat, yakni dengan penulisan <pre><code>...</code></pre>.
Baca juga :
Highlighter atau yang secara lengkapnya syntax highlighter merupakan fitur khusus yang memiliki fungsi sebagai penempatan untuk kode-kode pemrograman. Tujuan dari penggunaan syntax highlighter ini ialah sebagai langkah untuk mempermudah pengunjung/pembaca dalam membaca atau mempelajari sebuah kode tersebut. Sejalan dengan tujuan itu, bila dilihat saja, tampilan dari syntax highlighter ini berbeda dengan tulisan biasa pada postingan/artikel kalian. Jenis/macam dari highlighter sendiri sangatlah banyak. Untuk highlighter yang bakalan gw bahas di artikel ini, ialah highlighter seperti pada gambar di atas itu. Tidak hanya satu warna tulisan saja, tetapi berwarna-warni dan menggunakan efek scroll, agar bila kode nya sangat panjang, maka tidak akan membuat halaman postingan kalian terlihat boros. Syntax highlighter ini gw dapet langsung dari bawaan template yang sekarang ini gw pake. Ada sedikit yang gw modif sendiri, supaya ada efek scroll dan menjadi lebih enak dilihat. Hasil akhirnya ialah seperti gambar di atasi itu. Langsung saja kita ke tutorialnya. Simak lebih lanjut artikel ini.
Membuat Syntax Highlighter di Postingan Blog
Langsung saja, berikut ini tutorial agar bisa menerapkan highlighter seperti pada gambar di atas tadi.
- Buka blogger
- Setelah masuk blogger, klik bagian "Tema" atau "Template",
- Setelah itu, untuk versi blogger 2021, kalian klik icon dropdown yang ada disebelah tulisan "sesuaikan"
- Pilih 'Edit HTML'
- Silakan kalian cari terlebih dahulu, apakah template blog kalian itu sudah terpasang kode jquery atau belum. Kalian bisa cari dengan bantuan Ctrl+F kemudian ketikkan "jquery". Bila tidak ditemukan, maka kalian ke langkah 6, sedangkan kalau sudah ada, kalian bisa langsung ke langkah 7.
- Bila template kalian belum terpasang kode jquery, maka silakan kalian cari kode </head> di rangkaian kode HTML kalian. Kalian bisa menggunakan bantuan Ctrl+F lagi. Setelah itu, silakan copy-paste kan kode di bawah ini sebelum kode </head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> - Setelah itu, masih di tempat yang sama, silakan kalian copy-paste kan kode berikut ini dan letakkan juga sebelum kode </head> (bisa setelah kode jquery tsb).
*) NB : Kalian bisa ubah angka yang gw tebelin dan underline itu. Itu adalah angka untuk mengatur ketinggian maksimal highlighter yang diinginkan/* Highlighter */ pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem} .post-body code{padding:1.2em; max-height: 200px; width: auto; overflow: scroll}.post-body pre{padding:0;border-radius:3px;background-color:#172941; word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#172941;color:#fff;line-height:1.5; text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363} .post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333} .post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0} - Kemudian, langkah terakhir, ialah kalian menempatkan kode berikut ini agar saat highlighter didouble click atau diklik dua kali, maka akan langsung ter-select semua kode dalam highlighternya itu. Tempatkan kode berikut ini di sebelum kode </body>.
// Double Click $('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"), i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1); function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Indzign/theme/9cb6e56a/highlightprox.js", document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload) :window.onload=downloadJSAtOnload; $(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})}); - Setelah selesai, klik "save". Kini template anda sudah punya kode untuk syntax highlighter nya.
Baca juga :
Pemanggilan Syntax Highlighter (Cara Penulisan)
Setelah selesai menempatkan kode pada rangkaian html kalian, sekarang kalian sudah bisa menggunakannya. Untuk menggunakannya, kalian tinggal tuliskan kode <pre><code> disebelum kode kalian dan </code></pre> setelah kode kalian. Ingat taruhnya di mode tampilan HTML ya. Contoh bentuk penulisannya ialah sbb;
<pre><code>TULISKAN KODE KALIAN DISINI</code></pre>
INGAT!
Sebelum kode kalian di copy-pastekan di template penulisan itu, kalian harus parse dulu kode kalian ya. Silakan parse kode kalian disini. Untuk penjelasan parse code, silakan kalian baca postingan gw sebelumnya.
Baca disini :
Tambahan :Bila saat penempatan kode kode di atas, kalian mengalami error, maka kalian bisa tambahkan tag di masing-masing kode diatas sbb:1. Untuk kode langkah 7, silakan kalian tambahkan tag berikut ini,<style type='text/css'>(... letakkan kode yang ada dilangkah 7 di sini)</style>2. Untuk kode langkah 8, silakan kalian tambahkan tag berikut ini,<script type='text/javascript'>//<![CDATA[(... letakkan kode yang ada dilangkah 8 di sini)//]]></script>
Baca juga :
Baik, demikian penjelasan gw mengenai tutorial membuat syntax highlighter di postingan blog. Silakan bila ada pertanyaan bisa ditanyakan di kolom komentar. Semoga bermanfaat dan membantu. Sekian, Terima kasih.
