author Ahmad Muhardian

Cara Menggunakan highlight.js di Blogger

Cara Menggunakan highlight.js di Blogger

Punya blog pemrograman tapi tampilan kode programnya polos hitam-putih tanpa warna? 😵

Kode yang ditulis tanpa pewarnaan sintaks (syntax highlighting) sangat sulit dibaca oleh pengunjung blog. Sebelum mengenal library khusus, banyak dari kita yang mengakalinya dengan menyisipkan embed eksternal seperti GitHub Gist, Pastebin, atau Ideone.

Tapi kalau kodenya cuma beberapa baris, pakai embed eksternal justru terasa merepotkan dan memperberat load halaman.

Solusi paling cepat, ringan, dan elegan adalah menggunakan highlight.js!

Yuk, pelajari cara memasang dan menggunakannya di Blogger dengan mudah!

Apa itu highlight.js?

highlight.js adalah library JavaScript super ringan yang berfungsi memberikan pewarnaan sintaks (syntax highlighting) otomatis pada kode program di web.

Keunggulan highlight.js:

  • Otomatis Mendesain Bahasa: Mampu mengenali jenis bahasa pemrograman secara otomatis.
  • Sangat Ringan: Tidak membutuhkan dependensi seperti jQuery.
  • Banyak Pilihan Tema: Mendukung puluhan tema warna populer (seperti GitHub, Monokai, VS Code, Atom One Dark, dll).

Langkah 1: Memasang highlight.js di Template Blogger

Karena Blogger tidak menyediakan direktori untuk mengunggah file JavaScript atau CSS secara langsung, kita akan memanfaatkan layanan CDN (Content Delivery Network).

Berikut langkah-langkahnya:

  1. Buka dashboard Blogger.
  2. Masuk ke menu Tema (Theme) -> klik tombol panah di samping ‘Sesuaikan’ -> pilih Edit HTML.
  3. Cari tag </head> di dalam kode template.
  4. Salin dan tempel skrip berikut tepat di atas tag </head>:
<!-- Highlight.js Syntax Highlighter -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- End Highlight.js -->
  1. Klik tombol Simpan (Save) di pojok kanan atas.

Memasang highlight.js di template blogger

Catatan Penting:

  • Mengubah Tema Warna: Kode github.min.css di atas menggunakan tema gaya GitHub. Jika kamu ingin menggunakan tema lain (misalnya Monokai), kamu cukup mengganti github.min.css menjadi monokai-sublime.min.css.
  • Fungsi Script: hljs.highlightAll(); bertugas mendeteksi dan memberi warna secara otomatis pada seluruh elemen kode di artikel kamu saat halaman selesai di muat.

Langkah 2: Menggunakan highlight.js pada Artikel Blogger

Setelah memasang script di template, sekarang kamu bisa menampilkan kode berwarna di artikel blogmu.

Caranya sangat mudah:

  1. Saat membuat artikel di Blogger, alihkan mode editor dari Tampilan Menulis (Compose View) ke Tampilan HTML (HTML View).
  2. Apit kode programmu dengan tag <pre><code class="language-nama_bahasa">.

Contoh Kode Java:

<pre><code class="language-java">
public class Contoh {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
</code></pre>

Contoh Kode C++:

<pre><code class="language-cpp">
#include <iostream>
using namespace std;

int main() {
    cout << "Hello World!" << endl;
    return 0;
}
</code></pre>

Contoh Kode Python:

<pre><code class="language-python">
def sapa(nama):
    print(f"Halo {nama}, selamat belajar!")

sapa("Petani Kode")
</code></pre>

Tips Menampilkan Kode HTML / XML

Jika kamu ingin menampilkan snippet kode HTML, XML, atau tag di dalam artikel, browser akan menganggapnya sebagai bagian dari elemen halaman web.

Agar kode HTML ditampilkan sebagai teks dan tidak di-render oleh browser, kamu perlu mengubah (encode) beberapa karakter khusus:

  • Ubah simbol < menjadi &lt;
  • Ubah simbol > menjadi &gt;

Contoh penulisan kode HTML di artikel:

<pre><code class="language-html">
&lt;div class="container"&gt;
    &lt;h1&gt;Selamat Datang di Petani Kode!&lt;/h1&gt;
&lt;/div&gt;
</code></pre>

Mana Tema Favoritmu?

Kamu bisa melihat daftar lengkap tema warna dan pratinjau tampilannya di situs resmi highlightjs.org.

Sangat mudah dan praktis, kan? Sekarang artikel pemrograman di blog Blogger milikmu jadi jauh lebih rapi, profesional, dan nyaman dibaca oleh pengunjung!

Selamat mencoba dan happy blogging! 🚀