Membuat blog tutorial coding di Blogspot memiliki tantangan tersendiri, terutama dalam hal menampilkan potongan kode. Tanpa fitur syntax highlighter, kode yang Anda bagikan akan terlihat berantakan, sulit dibaca, dan tidak profesional. Oleh karena itu, memasang fitur highlighter sangat wajib bagi Anda yang ingin serius membangun blog bertema pemrograman.
Salah satu library terbaik yang sering digunakan oleh pengembang web profesional adalah Prism.js. Library ini sangat ringan, mendukung banyak bahasa pemrograman, dan memiliki tampilan yang sangat modern. Dalam panduan ini, kita akan belajar cara memasangnya di Blogger hanya dalam beberapa langkah mudah.
Langkah Pertama: Menambahkan CSS ke Template Blogger
Langkah awal adalah memasukkan kode CSS agar tampilan blok kode memiliki warna dan tata letak yang menarik. Anda perlu masuk ke dashboard Blogger, pilih menu Tema, klik tanda panah di samping Sesuaikan, lalu pilih Edit HTML.
Cari kode </head> dan letakkan kode berikut tepat di atasnya:
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css' rel='stylesheet'/>
<style>
pre[class*="language-"] {
border-radius: 8px;
margin: 20px 0;
font-size: 14px;
}
</style>Langkah Kedua: Menambahkan JavaScript Prism.js
Setelah menambahkan gaya visual, sekarang kita perlu menambahkan logika JavaScript agar sistem dapat mengenali bahasa pemrograman secara otomatis. Tetap di halaman Edit HTML, silakan scroll ke bagian paling bawah template Anda.
Cari kode </body> dan tempelkan kode skrip di bawah ini tepat di atas tag tersebut:
<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/plugins/autoloader/prism-autoloader.min.js'></script>Jangan lupa untuk klik simpan pada ikon disket di pojok kanan atas setelah Anda selesai menambahkan kedua kode tersebut.
Cara Menggunakan Syntax Highlighter di Artikel
Setelah pemasangan selesai, Anda tidak bisa langsung menulis kode begitu saja di dalam postingan. Anda harus menggunakan format HTML tertentu agar Prism.js bisa bekerja. Saat menulis artikel, pastikan Anda berpindah dari Tampilan Menulis ke Tampilan HTML.
Gunakan format berikut untuk membungkus kode Anda:
<pre><code class="language-html">
<!-- Masukkan kode HTML Anda di sini -->
</code></pre>Gantilah class "language-html" sesuai dengan bahasa yang Anda gunakan, misalnya "language-css", "language-javascript", atau "language-php". Prism.js akan secara otomatis menyesuaikan pewarnaan sesuai dengan bahasa tersebut.
Tips Penting Mengatasi Karakter Khusus
Blogger terkadang mengalami error jika Anda langsung memasukkan karakter seperti tanda kurung siku buka. Agar kode tampil sempurna, sangat disarankan untuk melakukan parse kode atau mengubah karakter khusus terlebih dahulu. Anda bisa menggunakan alat parse online agar simbol seperti < berubah menjadi < sebelum diletakkan di dalam tag code.
Dengan menerapkan syntax highlighter modern ini, blog Anda kini terlihat jauh lebih profesional dan memudahkan pembaca untuk menyalin serta mempelajari skrip yang Anda bagikan. Selamat mencoba!