JSFiddle - Taman Bermain Kode

Bagikan atau Sematkan Fiddle

Tab

JavaScript
HTML
CSS
Hasil

Tampilan

Terang
Gelap

Cuplikan sematan

Pengaturan Editor

Perilaku

Jalankan kode secara otomatis
Hanya jalankan kode yang tervalidasi
Simpan kode secara otomatis
Validasi kode langsung
Muatan ulang CSS panas
Muatan ulang HTML panas

Umum

Nomor baris
Bungkus baris
Indentasi dengan Spasi
Pelengkapan Kode Otomatis
Ukuran indentasi:
Ukuran font:
Keluarga font:

Konsol

Konsol di editor
Bersihkan konsol saat dijalankan

Catatan Perubahan JSFiddle

Daftar pilihan font monospace untuk koder
Sekarang Anda dapat menggunakan berbagai font monospace di editor – kami memiliki daftar pilihan font yang cukup keren, termasuk yang premium. Cukup buka aplikasi mini Coder Fonts dari bilah samping atau dari Pengaturan Editor. Favorit saya saat ini adalah Input dan Commit Mono.
Generator CSS Flexbox sebagai aplikasi JSFiddle
Generator CSS Flexbox kami memungkinkan Anda membuat tata letak, dan melewati kebingungan properti dan nama nilai (jujur saja W3C tidak melakukan pekerjaan yang baik dalam hal ini). Tidak akan berbohong, ini sangat terinspirasi oleh flexer tetapi dikodekan dari awal.
Perubahan perilaku untuk Sumber Daya Eksternal
Menambahkan Sumber Daya Eksternal tidak lagi membuat daftar sumber daya di bilah samping, tetapi akan disuntikkan sebagai tag LINK atau SCRIPT di dalam panel HTML.
Pelengkapan Kode dengan konteks tambahan
Pelengkapan Kode sekarang juga akan memiliki konteks dari semua panel sebelum menyarankan kode kepada Anda – jadi misalnya jika Anda memiliki beberapa CSS atau JS, panel HTML akan menyarankan kode berdasarkan dua panel lainnya.
🦄 Pelengkapan Kode AI (beta)
Memperkenalkan sedikit sentuhan AI di editor – Pelengkapan Kode berdasarkan model Codestral (oleh Mistral). Untuk saat ini ini adalah implementasi BYOK yang berarti Anda perlu menyediakan Kunci API sendiri – Anda dapat mendapatkannya secara gratis.
Peralihan editor dari CodeMirror ke Monaco (sama seperti VSCode)
Setelah banyak pertimbangan saya memutuskan untuk beralih dari CodeMirror ke Monaco. Ada beberapa alasan untuk ini. CodeMirror 5 tidak lagi dikembangkan, dan peralihan ke 6 akan membutuhkan penulisan ulang besar-besaran karena tidak banyak kompatibilitas antara kedua versi. Monaco sendiri memiliki banyak fitur bawaan, hal-hal yang membutuhkan beberapa plugin eksternal untuk masuk ke implementasi CodeMirror. Saya sangat berterima kasih kepada Marijn atas karyanya di CodeMirror, ini telah berfungsi dengan baik selama bertahun-tahun.
JSFiddle akan memuat lebih cepat
Utang teknis itu berat. Ingat saat MooTools adalah kerangka kerja JS yang mutakhir? Kami ingat dan sebagian besar JSFiddle masih bergantung padanya hingga hari ini, tetapi karena hampir semua fitur MooTools sekarang tersedia di JS asli, sudah saatnya untuk menghapusnya dari basis kode. Ini memakan waktu sekitar seminggu kerja, banyak pengujian, tetapi sekarang selesai. Dan paket akhir dari bundel JS kami ~30% lebih kecil.

Dapatkan Kunci API Mistral

Panduan singkat untuk mendapatkan Kunci API Mistral gratis.

Daftar untuk akun Mistral, dan pilih paket langganan Eksperimen gratis.
Masuk, dan buka bagian Kunci API organisasi Anda.
Klik Buat kunci baru, isi "JSFiddle" sebagai nama kunci API, dan simpan.
Salin kunci tersebut, dan tempelkan ke JSFiddle – di bawah Pelengkapan Kode AI di Bilah Samping.
Selesai! Pelengkapan Kode AI sekarang akan berfungsi.