Kode Rahasia Membuat Syntax Highlighter (Kotak Kode Warna-Warni) Sendiri

4/07/2026
Cara Membuat Syntax Highlighter atau Kotak Kode di Blogger

Menampilkan kode HTML, CSS, JavaScript, atau bahasa pemrograman lainnya di dalam artikel Blogger membutuhkan format yang rapi agar mudah dibaca dan disalin. Jika kode ditulis sebagai teks biasa, tampilannya dapat bercampur dengan paragraf dan membuat pembaca kesulitan membedakan antara penjelasan dengan kode yang harus digunakan.

Salah satu solusi yang dapat digunakan adalah Syntax Highlighter atau kotak kode. Dengan CSS dan HTML sederhana, Anda dapat membuat area khusus untuk menampilkan kode dengan tampilan menyerupai editor atau terminal modern.

Pada tutorial ini, kita akan membahas cara membuat Syntax Highlighter di Blogger tanpa menggunakan library eksternal. Metode ini menggunakan CSS sederhana sehingga lebih mudah diterapkan pada blog dan dapat dilengkapi dengan fitur scroll horizontal untuk kode yang panjang.

Apa Itu Syntax Highlighter?

Syntax Highlighter adalah tampilan khusus yang digunakan untuk menyajikan kode program agar lebih mudah dibaca. Kode biasanya ditempatkan di dalam sebuah area terpisah dengan latar belakang berbeda, jenis huruf monospace, dan format visual yang membedakannya dari teks artikel.

Pada tutorial ini, Syntax Highlighter dibuat menggunakan kombinasi HTML dan CSS. Desainnya memiliki bagian header dengan tiga titik dekoratif serta area kode yang dapat digulir secara horizontal.

Metode ini tidak menggunakan library Syntax Highlighting eksternal. Artinya, desain kotak dibuat secara mandiri dan fokus pada tampilan area kode, bukan pewarnaan sintaks otomatis berdasarkan bahasa pemrograman.

Manfaat Menggunakan Kotak Kode di Blogger

Menggunakan kotak kode memberikan beberapa manfaat, terutama bagi blog yang membahas tutorial Blogger, HTML, CSS, JavaScript, pemrograman, atau teknologi.

  • Kode lebih mudah dibedakan dari teks artikel.
  • Tampilan artikel lebih rapi dan profesional.
  • Kode lebih mudah disalin oleh pembaca.
  • Scroll horizontal membantu menangani kode yang memiliki baris panjang.
  • Tidak membutuhkan library eksternal untuk membuat tampilan dasar.
  • Dapat disesuaikan dengan desain template Blogger.

Bagaimana Cara Kerja Kotak Kode Ini?

Struktur Syntax Highlighter yang digunakan terdiri dari tiga bagian utama, yaitu wadah utama, header dekoratif, dan area kode.

kotak-kode-elegan
├── kepala-kotak
│   ├── titik-merah
│   ├── titik-kuning
│   └── titik-hijau
└── badan-kotak
    └── kode

CSS kemudian digunakan untuk mengatur warna, jarak, radius sudut, font, dan kemampuan scroll horizontal pada area kode.

Kode CSS Syntax Highlighter Blogger

Langkah pertama adalah membuat CSS untuk mengatur desain kotak kode. Kode berikut berasal dari struktur artikel dan dapat digunakan sebagai dasar tampilan.


<style>
.kotak-kode-elegan {
    background-color: #1e1e1e;
    border-radius: 8px;
    margin: 25px 0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    font-family: inherit;
}

.kepala-kotak {
    background-color: #2d2d2d;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #3d3d3d;
}

.titik-hiasan {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.titik-merah {
    background-color: #ff5f56;
}

.titik-kuning {
    background-color: #ffbd2e;
}

.titik-hijau {
    background-color: #27c93f;
}

.badan-kotak {
    padding: 15px 20px;
    overflow-x: auto;
}

.badan-kotak pre {
    margin: 0;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    color: #e6e6e6;
    font-size: 14px;
    line-height: 1.6;
    tab-size: 4;
}
</style>

Kode HTML untuk Membuat Kotak Kode

Setelah CSS tersedia, gunakan struktur HTML berikut sebagai wadah setiap kode yang ingin ditampilkan di dalam artikel.


<div class="kotak-kode-elegan">
    <div class="kepala-kotak">
        <div class="titik-hiasan titik-merah"></div>
        <div class="titik-hiasan titik-kuning"></div>
        <div class="titik-hiasan titik-hijau"></div>
    </div>

    <div class="badan-kotak">
        <pre>TULIS_KODE_ANDA_DI_SINI</pre>
    </div>
</div>

Ganti bagian TULIS_KODE_ANDA_DI_SINI dengan kode yang ingin Anda tampilkan kepada pembaca.

Cara Memasang CSS Syntax Highlighter di Blogger

CSS sebaiknya ditempatkan satu kali pada template atau bagian HTML/JavaScript yang sesuai agar dapat digunakan kembali ketika artikel membutuhkan kotak kode.

Langkah 1: Buka Dashboard Blogger

Masuk ke dashboard Blogger dan pilih blog yang ingin Anda modifikasi.

Langkah 2: Buka Menu Tata Letak

Pilih menu Tata Letak pada dashboard Blogger.

Langkah 3: Tambahkan Gadget HTML/JavaScript

Cari area gadget yang tersedia, kemudian pilih Tambahkan Gadget dan pilih HTML/JavaScript.

Biarkan bagian judul kosong, kemudian masukkan kode CSS Syntax Highlighter pada bagian konten.

Langkah 4: Simpan Perubahan

Simpan gadget tersebut dan periksa blog untuk memastikan tidak ada perubahan yang mengganggu tampilan template.

Cara Menggunakan Kotak Kode di Artikel Blogger

Setelah CSS terpasang, Anda dapat menggunakan struktur HTML kotak kode pada postingan yang berisi tutorial.

Langkah 1: Buat atau Edit Artikel

Buka menu Postingan dan buat artikel baru atau edit artikel yang sudah ada.

Langkah 2: Pilih Tampilan HTML

Pada editor Blogger, ubah mode penulisan ke Tampilan HTML.

Langkah 3: Masukkan Struktur Kotak Kode

Tempel struktur HTML berikut pada lokasi yang ingin digunakan:


<div class="kotak-kode-elegan">
    <div class="kepala-kotak">
        <div class="titik-hiasan titik-merah"></div>
        <div class="titik-hiasan titik-kuning"></div>
        <div class="titik-hiasan titik-hijau"></div>
    </div>

    <div class="badan-kotak">
        <pre>TULIS_KODE_ANDA_DI_SINI</pre>
    </div>
</div>

Langkah 4: Masukkan Kode Anda

Ganti teks TULIS_KODE_ANDA_DI_SINI dengan kode yang ingin dibagikan.

Contoh sederhana:


<div class="kotak-kode-elegan">
    <div class="kepala-kotak">
        <div class="titik-hiasan titik-merah"></div>
        <div class="titik-hiasan titik-kuning"></div>
        <div class="titik-hiasan titik-hijau"></div>
    </div>

    <div class="badan-kotak">
        <pre>body {
    margin: 0;
    padding: 20px;
}</pre>
    </div>
</div>

Penting: Escape Kode HTML Sebelum Ditampilkan

Jika Anda ingin menampilkan kode HTML sebagai teks, kode tersebut harus ditulis menggunakan format HTML entity agar browser tidak menganggapnya sebagai elemen HTML yang harus dirender.

Contohnya, simbol:

<

ditulis sebagai:

&lt;

Sedangkan simbol:

>

ditulis sebagai:

&gt;

Contoh kode HTML:


<div class="contoh">
    <p>Halo Blogger</p>
</div>

Dengan cara tersebut, browser akan menampilkan kode sebagai teks sehingga tidak menjalankannya sebagai struktur HTML halaman.

Mengapa Kode HTML Harus Di-Encode?

Elemen HTML seperti <div>, <p>, atau <script> memiliki fungsi khusus bagi browser. Jika kode tersebut ditempel secara langsung tanpa encoding pada lokasi yang tidak sesuai, browser dapat menganggapnya sebagai bagian dari struktur halaman.

Karena itu, ketika membuat artikel tutorial HTML, gunakan HTML entity untuk karakter khusus yang diperlukan agar kode dapat ditampilkan sebagai contoh yang bisa dibaca dan disalin.

Fitur Scroll Horizontal pada Kotak Kode

Salah satu bagian penting dari CSS di atas adalah:

.badan-kotak {
    padding: 15px 20px;
    overflow-x: auto;
}

Properti overflow-x: auto memungkinkan area kode memiliki scroll horizontal ketika isi kode lebih lebar daripada kotak.

Fitur ini sangat berguna untuk perangkat mobile karena baris kode yang panjang tidak perlu memaksa seluruh halaman melebar.

Cara Membuat Kotak Kode Lebih Responsif

Agar kotak kode tetap nyaman digunakan pada smartphone, Anda dapat menambahkan beberapa penyesuaian CSS.


.badan-kotak {
    padding: 15px;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.badan-kotak pre {
    white-space: pre;
    min-width: max-content;
}

Dengan konfigurasi tersebut, kode dapat mempertahankan format spasi dan barisnya sekaligus menyediakan area scroll ketika diperlukan.

Cara Mengubah Tampilan Kotak Kode

Anda dapat menyesuaikan tampilan kotak kode sesuai dengan desain template Blogger.

Mengubah Warna Background

.kotak-kode-elegan {
    background-color: #1e1e1e;
}

Ganti nilai background-color sesuai dengan warna yang diinginkan.

Mengubah Ukuran Font

.badan-kotak pre {
    font-size: 14px;
}

Anda dapat memperbesar atau memperkecil nilai tersebut sesuai kebutuhan.

Mengubah Jarak Kotak

.kotak-kode-elegan {
    margin: 25px 0;
}

Nilai margin dapat disesuaikan agar jarak antara kotak kode dengan paragraf di atas dan bawah terlihat proporsional.

Cara Menguji Syntax Highlighter Blogger

Sebelum menerbitkan artikel, gunakan fitur Pratinjau pada Blogger.

Periksa beberapa hal berikut:

  • Kotak kode tampil dengan benar.
  • Tiga titik dekoratif muncul pada bagian header.
  • Teks kode tidak keluar dari area kotak.
  • Scroll horizontal bekerja ketika kode terlalu panjang.
  • Kotak tetap nyaman dilihat pada smartphone.
  • Kode tidak mengubah struktur artikel di luar kotak.

Kesalahan Umum Saat Membuat Kotak Kode di Blogger

1. Kode HTML Tidak Di-Encode

Ini merupakan salah satu kesalahan yang sering terjadi ketika menampilkan contoh HTML. Gunakan HTML entity untuk karakter khusus seperti < dan > agar kode dapat ditampilkan sebagai teks.

2. Nama Class Tidak Konsisten

Pastikan nama class pada HTML sama dengan nama class yang didefinisikan di CSS.

Contohnya:

.kotak-kode-elegan

harus dipanggil menggunakan:

<div class="kotak-kode-elegan">

3. Tag HTML Tidak Ditutup

Pastikan setiap elemen yang membutuhkan tag penutup sudah ditutup dengan benar agar tidak mengganggu struktur halaman.

4. CSS Dimasukkan Berulang Kali

Jika CSS sudah tersedia secara global pada template atau gadget, Anda tidak perlu menyalin seluruh CSS pada setiap artikel. Cukup gunakan struktur HTML kotak kode ketika diperlukan.

Apakah Ini Syntax Highlighting Otomatis?

Perlu dibedakan antara kotak kode dan Syntax Highlighting otomatis. Kode pada tutorial ini membuat wadah visual untuk menampilkan kode dengan desain yang rapi, tetapi tidak memberikan pewarnaan otomatis berdasarkan sintaks HTML, CSS, JavaScript, atau bahasa pemrograman lainnya.

Jika Anda membutuhkan pewarnaan sintaks otomatis, diperlukan mekanisme tambahan seperti CSS khusus atau library Syntax Highlighting. Namun, untuk kebutuhan artikel tutorial sederhana, kotak kode mandiri ini sudah cukup untuk membuat kode lebih terstruktur dan mudah dibaca.

Tips SEO untuk Artikel Tutorial Kode Blogger

Jika blog Anda banyak membahas HTML, CSS, JavaScript, Blogger, atau tutorial website, struktur artikel juga perlu diperhatikan.

  • Gunakan judul artikel yang spesifik sesuai topik.
  • Gunakan keyword secara natural pada paragraf pembuka.
  • Gunakan struktur H2 dan H3 untuk memisahkan pembahasan.
  • Tambahkan alt text yang relevan pada gambar utama.
  • Jelaskan fungsi kode sebelum memberikan contoh.
  • Gunakan format kode yang mudah disalin.
  • Pastikan tampilan artikel nyaman pada perangkat mobile.

FAQ Syntax Highlighter Blogger

Apa itu Syntax Highlighter?

Syntax Highlighter adalah tampilan yang digunakan untuk menyajikan kode program agar lebih mudah dibaca. Pada tutorial ini, tampilannya dibuat menggunakan HTML dan CSS tanpa library eksternal.

Apakah kotak kode ini bisa digunakan di Blogger?

Ya. Struktur HTML dan CSS pada tutorial ini dapat digunakan pada artikel Blogger selama kode ditempatkan dan ditulis dengan format yang sesuai.

Apakah kotak kode ini bisa digunakan untuk HTML dan CSS?

Ya. Kotak ini dapat digunakan untuk menampilkan berbagai jenis kode seperti HTML, CSS, JavaScript, dan kode lainnya sebagai teks.

Apakah kotak kode ini otomatis memberi warna pada sintaks?

Tidak. Kode ini berfungsi membuat wadah visual untuk kode. Pewarnaan sintaks otomatis membutuhkan sistem atau library tambahan.

Apakah kotak kode responsif di HP?

Ya. CSS menggunakan overflow-x: auto sehingga kode yang lebih lebar dari layar dapat digeser secara horizontal.

Apakah CSS harus dipasang di setiap artikel?

Tidak. Jika CSS sudah dipasang secara global pada template atau gadget yang sesuai, Anda cukup menggunakan struktur HTML kotak kode pada artikel yang membutuhkannya.

Kesimpulan

Cara membuat Syntax Highlighter atau kotak kode di Blogger dapat dilakukan menggunakan HTML dan CSS sederhana tanpa harus menggunakan library eksternal. Dengan struktur yang terdiri dari header dekoratif dan area kode, tutorial pemrograman dapat terlihat lebih rapi serta lebih mudah dipahami pembaca.

Fitur overflow-x: auto juga membantu menjaga tampilan tetap responsif ketika kode memiliki baris yang panjang. Pembaca dapat menggeser kode secara horizontal tanpa membuat seluruh halaman melebar.

Hal terpenting ketika menampilkan kode HTML adalah memastikan karakter khusus sudah ditulis menggunakan HTML entity jika kode tersebut harus ditampilkan sebagai teks. Dengan penerapan yang benar, Anda dapat membuat artikel tutorial Blogger, HTML, CSS, dan JavaScript terlihat lebih profesional sekaligus nyaman dibaca di perangkat desktop maupun smartphone.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!