Panduan tentang CodeMirror — perpustakaan editor kode berbasis JavaScript. Penjelasan fitur, cara memasang, contoh penggunaan, integrasi dengan CMS seperti WordPress, dan tips troubleshooting.
CodeMirror adalah perpustakaan JavaScript untuk membuat editor kode di dalam browser dengan dukungan penyorotan sintaks, penomoran baris, dan mode bahasa yang dapat dikustomisasi.
Halaman ini menyajikan penjelasan singkat tentang fungsi CodeMirror, langkah dasar pemasangan, contoh penggunaan, serta tips integrasi dan pemecahan masalah agar pengunjung yang menemukan path lama terkait 'codemirror' mendapatkan informasi berguna.
CodeMirror merupakan pustaka (library) JavaScript yang dirancang untuk menampilkan dan mengedit kode sumber di antarmuka web. Fokus utamanya adalah memberikan pengalaman mengetik kode yang nyaman dengan dukungan berbagai bahasa pemrograman dan opsi penyesuaian antarmuka.
Karena berjalan di browser, CodeMirror sering dipakai pada panel administrasi, editor konfigurasi, playground kode, atau fitur pengeditan dalam aplikasi web. Ia menyediakan API untuk mengatur mode bahasa, tema, dan perilaku kursor.
Penyorotan sintaks (syntax highlighting) untuk banyak bahasa: HTML, CSS, JavaScript, PHP, dan banyak lagi melalui mode yang tersedia.
Penomoran baris dan pemilihan blok (line numbers, selections) untuk membantu navigasi kode.
Kemampuan kustomisasi tema dan ukuran font agar tampilan editor sesuai gaya situs.
Complementary addons: pelengkapan otomatis, pencarian/penggantian, linting, dan folding (penyembunyian blok kode) yang bisa diaktifkan sesuai kebutuhan.
Dukungan keyboard shortcuts dan API untuk berinteraksi dengan konten editor secara programatik.
Langkah paling dasar adalah memuat file CSS dan JavaScript CodeMirror pada halaman Anda. Setelah itu buat elemen textarea atau container lain yang akan menjadi area editor, lalu inisialisasi CodeMirror melalui pemanggilan fungsi pembuatnya.
Contoh sederhana inisialisasi pada halaman HTML:
1) Sertakan file library dan tema yang diperlukan, misalnya codeMirror.css dan codemirror.js.
2) Buat textarea di HTML: <textarea id="editor">console.log('Halo');</textarea>
3) Inisialisasi dari JavaScript: var editor = CodeMirror.fromTextArea(document.getElementById('editor'), { lineNumbers: true, mode: 'javascript', theme: 'default' });
Parameter konfigurasi seperti lineNumbers, mode, theme, dan indentUnit dapat diubah untuk menyesuaikan pengalaman pengguna. Untuk fitur tambahan seperti autocompletion atau linting, biasanya perlu menambahkan plugin/addon dan file sumber yang relevan.
Pada sistem manajemen konten (CMS), CodeMirror dapat dimasukkan pada halaman administrasi atau formulir kustom untuk memberikan antarmuka pengeditan kode yang lebih baik daripada textarea biasa. Integrasi umumnya melibatkan enqueue skrip dan gaya dari tema atau plugin.
Tips umum integrasi: pastikan file CodeMirror tidak konflik dengan versi JavaScript lain yang digunakan situs; inisialisasi editor setelah elemen DOM tersedia; jika editor ditempatkan dalam tab atau modal, panggil refresh() pada instance CodeMirror setelah kontainer tersebut ditampilkan agar ukuran dan tampilan tersinkronisasi.
Jika menggunakan editor di lingkungan yang memerlukan penyimpanan data, lakukan sinkronisasi nilai editor ke field tersembunyi atau textarea sebelum pengiriman form, misalnya dengan editor.save() atau mengambil nilai melalui editor.getValue().
Jika penyorotan sintaks tidak muncul, cek apakah mode bahasa yang sesuai telah dimuat. Beberapa mode disediakan sebagai file terpisah dan harus disertakan secara eksplisit.
Masalah tampilan seperti editor tidak menyesuaikan lebar/tinggi saat diletakkan di dalam tab atau elemen tersembunyi dapat diatasi dengan memanggil editor.refresh() setelah kontainer dibuat terlihat.
Untuk menangani file kode yang sangat besar, pertimbangkan menonaktifkan fitur berat seperti linting real-time atau folding, atau tampilkan hanya sebagian konten guna mengurangi konsumsi memori dan meningkatkan responsif.
Perhatikan kompatibilitas tema dan ukuran font agar tampilan tetap dapat dibaca pada perangkat berbeda; sediakan konfigurasi responsif jika editor akan digunakan pada layar kecil.