Membagikan barisan kode pemrograman di dalam artikel blog sering kali menjadi tantangan tersendiri. Jika hanya ditulis menggunakan teks biasa, deretan kode tersebut akan terlihat menumpuk, sulit dibedakan, dan membingungkan pembaca yang mencoba mempelajarinya. Untuk mengatasi masalah visual ini, Anda membutuhkan sebuah fitur yang mampu mewarnai dan merapikan struktur kode tersebut secara otomatis. Panduan ini akan menunjukkan cara mengimplementasikan penyorot sintaks atau syntax highlighter agar blog tutorial Anda terlihat layaknya situs web pengembang profesional.
Mengenal Fitur Penyorot Sintaks Kode
Penyorot sintaks adalah sebuah skrip cerdas yang bertugas memindai teks di dalam artikel Anda dan memberikan warna berbeda pada setiap elemen kode berdasarkan bahasa pemrograman yang digunakan. Skrip ini akan membedakan warna untuk tag, atribut, variabel, hingga teks komentar. Dalam panduan ini, kita akan menggunakan pustaka pihak ketiga yang sangat ringan, terpercaya, dan kompatibel dengan hampir semua desain template Blogger.
Manfaat Utama Penggunaan Skrip Ini
Manfaat paling krusial dari penyorot sintaks adalah peningkatan tingkat keterbacaan artikel tutorial Anda secara drastis. Pembaca dapat dengan mudah mengidentifikasi bagian mana yang merupakan perintah sistem dan mana yang sekadar teks biasa. Selain itu, tampilan blog Anda akan terlihat jauh lebih kredibel di mata para pembuat kode lainnya. Skrip ini juga memastikan bahwa format spasi dan indentasi kode tetap terjaga rapi saat pembaca menyalinnya ke dalam editor kode mereka sendiri.
Contoh Penerapan di Halaman Blog
Bayangkan Anda sedang menulis tutorial cara membuat tombol interaktif menggunakan gabungan kode kerangka dokumen dan pemercantik visual. Tanpa penyorot sintaks, semua teks tersebut akan berwarna hitam dan berbaur dengan paragraf penjelasan Anda. Namun, setelah skrip ini dipasang, tag pembuka akan otomatis berwarna biru, nilai atribut menjadi hijau, dan properti gaya mungkin berwarna ungu. Pembaca bisa langsung memahami struktur instruksi tersebut hanya dalam hitungan detik pandangan pertama.
Kode Lengkap Siap Pakai
Berikut adalah barisan kode pemanggil pustaka penyorot sintaks yang terdiri dari tautan pemanggil gaya visual dan tautan pemanggil fungsi skrip. Kode ini menggunakan jaringan pengiriman konten publik sehingga tidak akan membebani ruang penyimpanan template situs Anda.
<!-- Pemanggil Gaya Visual Syntax Highlighter -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css' rel='stylesheet'/>
<!-- Pemanggil Fungsi Logika Syntax Highlighter -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js'></script>Cara Memasang Kode di Blogger
Langkah pertama, persiapkan peramban web di komputer Anda dan masuklah ke dalam halaman pengelola akun Blogger. Perhatikan deretan menu utama di sisi kiri layar Anda, kemudian klik menu Tema untuk bersiap masuk ke dalam pengaturan struktur desain situs Anda.
Langkah kedua, Anda akan melihat sebuah tombol bertuliskan Sesuaikan. Abaikan tombol tersebut dan klik pada ikon panah kecil yang terletak persis di sebelah kanannya. Saat menu tarik-turun muncul, silakan pilih opsi Edit HTML untuk membuka lembaran yang berisi kode sumber penyusun kerangka blog Anda.
Langkah ketiga, arahkan kursor tetikus Anda ke dalam area yang penuh dengan tulisan kode tersebut lalu klik satu kali. Tekan tombol kontrol bersamaan dengan huruf F pada keyboard untuk memunculkan kotak pencarian khusus. Ketikkan tag penutup kepala yaitu </head> pada kolom pencarian dan tekan enter untuk menemukan lokasinya.
Langkah keempat, salin baris pertama dari kode yang telah disediakan di atas, yaitu tautan pemanggil gaya visual yang berakhiran dengan ekstensi CSS. Tempelkan barisan kode tersebut persis satu baris di atas tag </head> yang sedang berkedip di layar Anda.
Langkah kelima, panggil kembali kotak pencarian Anda dan ketikkan tag penutup tubuh dokumen yaitu </body> lalu tekan enter. Salin sisa kode bagian bawah yang berisi tautan pemanggil fungsi JavaScript, lalu tempelkan persis satu baris di atas tag </body> tersebut.
Langkah keenam, amankan semua perubahan yang telah Anda buat dengan mengklik ikon disket yang berada di pojok kanan atas layar penyunting. Tunggu beberapa detik hingga layar memunculkan konfirmasi bahwa perubahan template telah berhasil disimpan.
Panduan Penggunaan Langkah demi Langkah
Langkah pertama dalam menggunakan fitur ini adalah membuat sebuah postingan atau artikel baru di Blogger. Saat Anda ingin memasukkan sebuah baris kode untuk dicontohkan kepada pembaca, pastikan Anda mengubah mode penulisan dari Tampilan Menulis menjadi Tampilan HTML menggunakan ikon menu di sudut kiri atas editor postingan.
Langkah kedua, ketikkan tag pembuka berupa kurung siku diikuti kata pre, dan di dalamnya tambahkan tag code dengan atribut kelas sesuai dengan bahasa pemrograman yang Anda bahas. Sebagai contoh, Anda bisa menuliskan class language-html khusus untuk format bahasa HTML. Setelah itu, letakkan teks kode Anda, dan tutup dengan tag penutup code serta penutup pre.
Langkah ketiga, pastikan seluruh simbol kurung siku pada kode yang Anda contohkan telah diubah menjadi entitas karakter khusus yang aman untuk peramban web. Anda wajib mengganti simbol kurung siku buka menjadi karakter ampersand diikuti huruf l, t, dan titik koma. Begitu pula untuk kurung siku tutup yang harus diubah menjadi karakter ampersand diikuti huruf g, t, dan titik koma agar kode tersebut tidak merusak tampilan artikel utama Anda.
Cara Menguji Keberhasilan Script
Setelah tahap pemasangan dan penulisan di dalam editor selesai dilakukan, Anda wajib menguji apakah skrip penyorot tersebut telah mewarnai teks Anda dengan benar. Silakan publikasikan artikel tutorial yang baru saja Anda tulis tersebut, lalu buka tautannya sebagai pengunjung biasa.
Gulir layar Anda hingga menemukan bagian di mana Anda menyematkan contoh kode tersebut. Jika teks kode Anda kini berada di dalam sebuah kotak dengan latar belakang gelap yang rapi dengan teks yang berwarna-warni memukau sesuai dengan struktur sintaks bahasanya, maka selamat, fitur penyorot sintaks telah sukses diimplementasikan dan siap memanjakan mata para pembelajar kode di situs Anda.
Kesalahan Umum Saat Mengedit Template
Lupa Mengubah Karakter Simbol Kode
Kesalahan paling fatal dan paling sering dilakukan oleh penulis tutorial pemula adalah menempelkan teks kode kerangka web mentah ke dalam editor postingan tanpa melakukan proses konversi entitas karakter terlebih dahulu. Jika Anda memasukkan instruksi kerangka dokumen langsung ke dalam kotak penyorot, template Blogger Anda akan mengira bahwa tag tersebut adalah instruksi nyata untuk membentuk halaman. Akibatnya, tata letak artikel Anda akan rusak berantakan. Anda wajib mengonversi simbol kurung siku sebelum memublikasikan contoh kode apa pun.
Salah Menuliskan Kelas Bahasa Program
Skrip penyorot ini bekerja secara pintar dengan cara membaca nama kelas yang Anda berikan pada tag pembuka. Jika Anda sedang membahas contoh kode kaskade gaya visual namun lupa mengganti nama kelas dari format kerangka awal menjadi bahasa pemercantik visual, maka aturan pewarnaan yang diterapkan akan keliru dan membuat warnanya tidak akurat. Selalu pastikan Anda memeriksa kembali atribut penanda bahasa pada tag pembuka agar sesuai dengan jenis bahasa pemrograman yang sedang Anda jabarkan.
Penutup
Semoga panduan teknis mengenai cara memasang dan menggunakan penyorot sintaks kode ini dapat langsung Anda praktikkan untuk meningkatkan profesionalisme blog tutorial Anda. Memberikan kenyamanan visual bagi pembaca adalah kunci utama untuk membuat mereka terus kembali dan nyaman belajar di situs Anda. Jika Anda menemui kesulitan teknis saat mengaplikasikan langkah-langkah di atas, jangan ragu untuk berdiskusi melalui kolom komentar yang tersedia. Silakan telusuri artikel lainnya di blog ini untuk menemukan berbagai trik pengembangan situs yang tidak kalah menarik. Selamat berkarya dan salam sukses!