RIFAIHAMDA.COM β Bagi seorang blogger teknologi atau developer yang sering menulis tutorial, menampilkan potongan kode (code snippet) dengan rapi adalah sebuah kewajiban.
Jika kamu hanya ingin menampilkan kotak kode di artikel, tanpa perlu ada fitur tombol βrunβ untuk menjalankan kode, maka kamu hanya perlu menggunakan dua plugin rekomendasi ini, yaitu Code Block Pro atau Enlighter.
Namun, jika kamu perlu ada fitur tombol βrunβ, maka kamu bisa gunakan situs seperti Replit atau CodePen.
Berikut kita bahas tentang plugin dan situs ini.
1) Tampilkan Blok Kode tanpa Fitur Tombol βRunβ
Ada dua rekomendasi plugin yaitu Code Block Pro dan Enlighter. Berikut kita bahas kedua plugin ini.
1.1) Code Block Pro β Beautiful Syntax Highlighting (oleh Kevin Batdorf)
Ini merupakan plugin WordPress modern yang menggunakan engine bernama Shiki, teknologi penyorot kode yang sama persis dengan yang digunakan oleh editor Visual Studio Code (VS Code).
Bagaimana cara pakainya? Setelah diinstal, kamu cukup menambahkan blok baru bernama βCode Block Proβ di editor Gutenberg, lalu ketik atau tempel kode di sana.
Kelebihan Code Block Pro, yaitu:
- Tampilannya profesional, hasilnya terlihat persis seperti editor VS Code yang biasa dilihat para developer saat ini (terlihat sangat modern dan kekinian).
- Tema warnanya premium, menyediakan ratusan tema populer langsung bawaan VS Code (seperti One Dark Pro, Dracula, Github Dark, Monokai, dll.).
- Ringan & cepat, menggunakan metode rendering modern yang tidak membebani browser pembaca.
- Fitur tambahan estetik, bisa menambahkan efek garis yang disorot (line highlighting), judul nama file di atas kotak kode, hingga mockup bingkai jendela Mac (titik merah, kuning, hijau).
Kekurangan Code Block Pro, yaitu:
- Beberapa fitur kustomisasi tingkat lanjut dikunci di versi berbayar (Pro).
1.2) Enlighter β Customizable Syntax Highlighter (oleh Andi Dittrich)
Ini merupakan plugin legendaris berbasis open-source yang menggunakan engine buatan sang developer sendiri (EnlighterJS). Plugin ini terkenal karena fiturnya yang sangat melimpah dan 100% gratis.
Bagaimana cara pakainya? Plugin ini menyediakan blok khusus di Gutenberg maupun tombol di Classic Editor. Kamu juga bisa mengatur semua tampilan visualnya melalui menu pengaturan Enlighter yang sangat detail di dasbor WordPress.
Kelebihan Enlighter, yaitu:
- 100% gratis & fitur melimpah, semua fitur kustomisasi terbaiknya bisa dinikmati gratis tanpa versi-versian.
- Fitur tabbed-code, kamu bisa menggabungkan beberapa bahasa pemrograman dalam satu kotak menggunakan sistem Tab (misal: Tab 1 untuk HTML, Tab 2 untuk CSS). Pembaca tinggal klik tabnya.
- Tombol interaktif bawaan, plugin ini memiliki tombol Copy to Clipboard otomatis agar pembaca bisa menyalin kode dengan sekali klik, dan mendukung mode inline code, tombol untuk memperbesar teks, penomoran baris otomatis, dan tombol untuk melihat versi teks polos (RAW).
Kekurangan Enlighter, yaitu:
- Desain agak klasik, tema visual bawaannya (seperti Enlighter, Classic, Dro Dro) terasa sedikit βjadulβ jika dibandingkan dengan tren desain minimalis tahun 2026 sekarang.
- Pengaturan rumit, menunya sangat banyak di dasbor WordPress, sehingga butuh waktu untuk mengutak-atiknya agar tampilannya pas.
1.3) Tabel Perbandingan antara Plugin Code Block Pro dan Enlighter
| Perbandingan | Code Block Pro | Enlighter |
| Engine Utama | Shiki (VS Code) | EnlighterJS |
| Kesan Tampilan | Minimalis, Modern, Kekinian | Fungsional, Klasik, Padat Fitur |
| Fitur Gabung Kode (Tabs) | Tidak ada | Ada (Sangat berguna untuk tutorial multi-file) |
| Tombol Copy | Ada | Ada |
| Kemudahan Pakai | Sangat Mudah (Langsung di blok editor) | Sedikit Rumit (Banyak menu pengaturan) |
1.4) Kesimpulannya Harus Pilih yang Mana?
Pilih Code Block Pro jika kamu mengutamakan estetika. Kamu ingin blog terlihat sangat modern, bersih, dan memanjakan mata pembaca dengan tema warna ala VS Code.
Pilih Enlighter jika kamu membutuhkan fungsi maksimal, seperti ingin menampilkan kode HTML dan CSS sekaligus dalam satu kotak menggunakan fitur Tabs, serta ingin kontrol penuh atas pengaturan kotak kode 100% gratis.
1.5) Waspada Jika Suka Gonta-Ganti Plugin!
Sebagai catatan, jika kamu suka gonta-ganti plugin, itu tidak akan menghapus teks kode, tetapi akan merusak estetika dan format tampilannya di artikel-artikel lama. Kamu harus mengedit kembali artikel lama satu per satu untuk menyesuaikannya dengan plugin yang baru.
Tips terbaiknya, cobalah beberapa plugin pilihanmu di satu artikel draft terlebih dahulu. Setelah kamu menemukan yang paling cocok di hati (baik dari segi tampilan maupun fitur), tetapkan pilihan tersebut untuk jangka panjang agar kamu tidak perlu repot memperbaiki artikel lama di kemudian hari.
2) Tampilkan Blok Kode dengan Fitur Tombol βRunβ
Ada dua rekomendasi situs yaitu Replit dan CodePen. Berikut kita bahas kedua situs ini.
2.1) Replit
Ini merupakan platform Cloud IDE atau tempat koding berbasis internet yang mendukung hampir semua bahasa pemrograman di dunia.
Bagaimana cara pakainya? Kamu membuat proyek kode di situs replit.com, lalu menyalin kode Embed (iframe) yang disediakan. Di WordPress, kamu tinggal menempelkan kode tersebut ke dalam blok HTML Khusus.
Setelah artikel diterbitkan, pembaca blog kamu akan melihat sebuah kotak interaktif yang berisi kode bahasa pemrograman lengkap dengan tombol Run / Play di atasnya.
Ketika pembaca mengklik tombol tersebut, kode akan langsung dieksekusi di tempat, dan hasilnya akan muncul di layar hitam (konsol) di bawahnya tanpa mereka harus meninggalkan website kamu.
Kelebihan Replit, yaitu:
- Mendukung hampir semua bahasa, kamu bisa menjalankan Python, Java, C++, C#, PHP, Ruby, Go, hingga web development lengkap.
- Punya terminal interaktif, pembaca bisa mengetikkan input di terminal (misalnya menjawab pertanyaan input(βMasukkan nama Anda: β)) dan melihat hasilnya langsung seperti di aplikasi komputer asli.
- Bisa memuat banyak file, kamu bisa membuat proyek yang terdiri dari beberapa file kode sekaligus dalam satu kotak embed.
Kekurangan Replit, yaitu:
- Loading lebih berat, karena harus menghubungkan blog ke virtual machine (komputer server) milik Replit di latar belakang, kotaknya butuh waktu beberapa detik untuk siap digunakan (loading).
- Ukuran kotak lebih besar, memakan cukup banyak ruang di artikel karena harus menampilkan struktur file, editor kode, dan layar terminal hitam sekaligus.
2.2) CodePen
Ini merupakan platform sosial dan tempat koding online yang dikhususkan untuk para web developer (Frontend).
Bagaimana cara pakainya? Buat kode di codepen.io, lalu salin link atau kode embed-nya. Kamu bisa menempelkannya langsung lewat blok HTML Khusus atau menggunakan bantuan plugin pihak ketiga seperti CodePen Embed Block agar tinggal tempel link saja.
Sama seperti Replit, CodePen juga berbasis βrunβ (eksekusi) ke situs lain (situs CodePen yaitu codepen.io), bukan berjalan di server WordPress kamu sendiri.
Bedanya, CodePen menyediakan dua cara untuk memasangnya di WordPress, kamu bisa menggunakan fitur bawaan WordPress tanpa plugin (lewat blok HTML/Embed), atau menggunakan plugin resmi yaitu CodePen Embed Block jika ingin pengaturan yang lebih praktis.
Namun, apa pun cara yang kamu pilih, proses eksekusi kodenya tetap dilakukan di server dan sistem CodePen.
Kesimpulannya, CodePen adalah solusi yang sangat aman dan ringan karena berbasis eksekusi luar (third-party). Jika artikel blog kamu banyak membahas tentang tutorial membuat tampilan website (HTML, CSS, JS), CodePen adalah pilihan paling standar dan paling estetik yang digunakan oleh jutaan developer di dunia.
Kelebihan CodePen, yaitu:
- Sangat ringan & cepat, karena kodenya (HTML/CSS/JS) dijalankan langsung di browser pembaca, proses loading-nya terasa instan.
- Hasil visual langsung terlihat, pembaca bisa melihat perubahan desain, animasi, atau tombol secara real-time di kotak pratinjau.
- Tampilan lebih estetik & rapi, desain kotak embed-nya sangat bersih, modern, dan tidak memakan banyak ruang di artikel.
- Ada fitur shortcode resmi, memudahkan pengguna WordPress karena tinggal tempel link saja (jika memakai pluginnya).
Kekurangan CodePen, yaitu:
- Bahasa sangat terbatas, hanya bisa menjalankan HTML, CSS, dan JavaScript. Kamu tidak bisa menjalankan Python, C++, Java, atau PHP di sini.
- Tidak ada terminal/konsol hitam, kurang cocok untuk belajar pemrograman dasar berbasis teks (input-output text).
2.3) Tabel Perbandingan antara Situs Replit dan CodePen
| Perbandingan | CodePen | Replit |
| Cocok untuk Tutorial | Web Design, UI/UX, Frontend (HTML/CSS) | Dasar Pemrograman, Logika, Backend (Python/C++) |
| Kecepatan Loading | Sangat Cepat | Sedikit Lambat |
| Interaktivitas Teks | Terbatas pada interaksi web | Sangat Tinggi (Bisa input-output di terminal) |
| Kemudahan Pasang | Sangat Mudah (Bisa via link/plugin) | Mudah (Harus via blok HTML Khusus) |
2.4) Kesimpulannya Harus Pilih Yang Mana?
Gunakan CodePen jika artikel kamu membahas tutorial membuat tampilan website, desain tombol, efek animasi, atau trik CSS/JavaScript.
Gunakan Replit jika artikel kamu membahas tutorial logika pemrograman, algoritma, atau bahasa dasar seperti Python, C++, dan Java.
2.5) Ini Dua Alasan Kenapa Pakai Replit atau CodePen, Jika Perlu Tombol βRunβ
Jika kamu ingin menyediakan tombol βrunβ untuk bahasa seperti Python, C++, atau Java, jalan terbaik dan paling aman adalah menggunakan situs platform Replit atau CodePen.
Alasan utamanya terkait βkeamananβ karena proses eksekusi (menjalankan) kodenya dilakukan di server milik mereka, bukan di server tempat website WordPress kamu berada. Dan alasan lainnya terkait βkecepatanβ website.
Dalam dunia web, metode ini disebut dengan Client-Side/Third-Party Embedding (menanamkan halaman dari situs pihak ketiga menggunakan iframe).
Saat kamu memasukkan kode dari Replit atau CodePen ke WordPress, kamu menggunakan tag <iframe β¦>. Di dalam sistem browser modern (seperti Google Chrome atau Firefox), iframe bertindak seperti kaca satu arah atau ruang isolasi.
Artinya, kode apa pun yang diketik atau dijalankan oleh pengunjung di dalam kotak Replit/CodePen dikurung di dalam kotak itu saja. Kode tersebut tidak memiliki jembatan atau akses sama sekali untuk keluar dan mengintip isi dokumen, database, atau pengaturan WordPress kamu.
Berikut adalah penjelasan mendalam mengapa cara ini jauh lebih aman dan cepat bagi WordPress kamu:
2.5.1) Alasan Keamanan (Security Sandbox)
Jika kamu menggunakan plugin yang menjalankan kode langsung di WordPress, artinya kamu mengizinkan orang asing (pengunjung web) untuk menjalankan program kode di dalam komputer server-mu. Ini sangat berbahaya.
Risiko jika menggunakan plugin lokal, orang jahat bisa memasukkan program kode terlarang untuk menghapus seluruh data database-mu, mengintip password, atau meretas server hosting-mu.
Keuntungan menggunakan Replit atau CodePen, ketika pembaca mengklik tombol βrunβ, kode tersebut dikirim dan dijalankan di dalam βwadah isolasiβ (sandbox) milik server Replit atau CodePen.
Jika ada orang yang memasukkan kode berbahaya atau meretas, yang diserang kerusakan adalah sistem Replit atau CodePen (yang sudah diproteksi ketat), sedangkan server WordPress kamu aman sepenuhnya.
2.5.2) Alasan Kecepatan dan Performa Server
Menjalankan bahasa pemrograman seperti Python, Java, atau C++ itu membutuhkan daya prosesor (CPU) dan memori (RAM) yang cukup besar, terutama jika kodenya rumit atau ada perulangan (looping) yang tidak berhenti.
Jika menggunakan plugin lokal, semisal jika ada 100 orang pengunjung web yang mengklik tombol βRunβ secara bersamaan di artikel kamu, server hosting WordPress kamu akan langsung bekerja keras, menjadi sangat lemot, bahkan bisa crash (down/mati).
Jika menggunakan Replit atau CodePen, server WordPress kamu hanya bertugas menampilkan teks artikel biasa. Tugas berat untuk memproses, menghitung, dan menjalankan kode Python tersebut semuanya dilempar ke server raksasa milik Replit atau CodePen. Website kamu akan tetap terasa ringan dan cepat diakses oleh pengunjung lain.
Kesimpulannya begini, menggunakan Replit atau CodePen itu ibaratnya kamu βmenonton YouTubeβ di dalam blog website kamu. Video yang diputar sangat berat, tetapi yang bekerja keras memutarnya adalah server Google/YouTube, sementara blog kamu hanya menampilkan βjendelanyaβ saja.
Itulah mengapa metode embed luar seperti Replit atau CodePen jauh lebih direkomendasikan daripada mencari plugin WordPress yang berjalan secara lokal. Selain aman dari peretas, tagihan hosting kamu juga tidak akan membengkak.
Dengan menyerahkan urusan βmenjalankan kode atau runβ ke Replit atau CodePen, kamu sebenarnya sedang memindahkan target serangan. Jika ada yang berniat meretas, mereka harus meretas sistem keamanan server raksasa milik Replit atau CodePen terlebih dahulu, yang mana itu hampir mustahil dilakukan lewat kotak embed di blog kamu.
Jadi, kamu bisa tidur nyenyak tanpa perlu khawatir website WordPress kamu akan jebol atau crash karena ulah pengunjung yang iseng mencoba-coba kode.***
