Kode ke Gambar
Ubah cuplikan kode menjadi gambar dengan penyorotan sintaksis di browser Anda, dengan 20+ bahasa, tema dan latar kustom, nomor baris, serta ekspor PNG atau SVG.
Kode ke Gambar — Tempel cuplikan, pilih bahasanya (atau biarkan deteksi otomatis menebak), dan gaya kartu kode bergaya Carbon dengan tema, latar gradien, solid, kustom, atau transparan, font monospace yang dapat disetel, nomor baris, dan judul jendela yang dapat diedit. Ekspor sebagai PNG pada skala 1x–3x atau sebagai SVG, atau salin gambar langsung ke papan klip. Penyorotan sintaksis (Prism) dan pengambilan gambar (html-to-image) sepenuhnya berjalan di browser Anda, sehingga kode Anda tidak pernah diunggah.
Apa itu Kode ke Gambar?
Kode ke Gambar adalah alat gratis berbasis browser yang mengubah cuplikan kode menjadi gambar yang bisa dibagikan — kartu kode bergaya dengan penyorotan sintaksis untuk postingan blog, dek presentasi, README, atau unggahan media sosial. Alat ini menyorot lebih dari 20 bahasa, termasuk JavaScript, TypeScript, Python, Go, Rust, Java, SQL, dan lainnya, dengan deteksi otomatis opsional yang menebak bahasa dari kode Anda. Hiasi kartu dengan salah satu dari tujuh tema, gradien preset, warna atau gradien kustom, atau latar transparan, lalu setel font monospace, ukuran font, padding, nomor baris, judul jendela, dan lebar keluaran. Kartu dirender secara langsung saat Anda menyunting, dan Anda bisa mengekspornya sebagai PNG pada 1x, 2x, atau 3x, menyimpannya sebagai SVG, atau menyalinnya ke papan klip.
Cara menggunakan Kode ke Gambar
- Tempel atau ketik kode Anda, atau hubungkan keluaran teks alat lain ke porta masukan di ruang kerja.
- Pilih bahasa yang sesuai atau aktifkan Deteksi otomatis di Pengaturan agar alat menebaknya dari kode Anda.
- Pilih tema dan latar — gradien preset, warna solid atau gradien kustom, atau transparan — di Pengaturan.
- Setel sesuai selera font monospace, ukuran font, padding, nomor baris, judul jendela, dan lebar keluaran.
- Perhatikan pratinjau langsung diperbarui saat Anda menyunting; klik untuk memperbesarnya di tampilan zoom.
- Ekspor kartu sebagai PNG pada 1x–3x, unduh sebagai SVG, atau salin gambar ke papan klip.
Contoh
Cuplikan Go dengan nomor baris
Tempel fungsi Go, aktifkan Deteksi otomatis agar bahasa dipilihkan untuk Anda, aktifkan nomor baris, pilih tema Nord, dan ekspor PNG 2x untuk tutorial.
Kartu bermerek dengan gradien kustom
Setel latar ke Gradien kustom, pilih dua warna merek Anda dan sebuah sudut, tambahkan judul jendela seperti app.tsx, lalu salin gambar langsung ke papan klip.
SVG yang dapat diskalakan untuk dokumentasi
Pilih tema terang Snow, atur lebar keluaran, dan unduh SVG agar kartu kode tetap tajam pada ukuran berapa pun di dokumentasi Anda.
Pertanyaan yang sering diajukan
- Bahasa apa saja yang bisa disorot?
- Lebih dari 20, termasuk JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift, dan GraphQL. Pilih salah satu dari menu atau aktifkan Deteksi otomatis agar bahasa ditebak dari kode Anda.
- Apa yang bisa saya ekspor, dan dengan kualitas apa?
- Ekspor PNG pada kerapatan piksel 1x, 2x, atau 3x, simpan SVG vektor, atau salin gambar langsung ke papan klip. Memilih latar Transparan membuat PNG mempertahankan kanal alfa tanpa latar apa pun di belakang kartu.
- Bisakah saya mengubah tampilan kartu?
- Bisa. Beralih antara tujuh tema, pilih gradien preset, warna solid atau gradien kustom, atau latar transparan, dan setel font monospace, ukuran font, padding, nomor baris, judul jendela yang dapat diedit, dan lebar keluaran.
- Apakah kode saya diunggah ke suatu tempat?
- Tidak. Baik penyorotan sintaksis (Prism) maupun pengambilan gambar (html-to-image) berjalan 100% di sisi klien, di browser Anda. Kode Anda tidak pernah diunggah, dikirim ke server kami, atau dibagikan, sehingga bahkan cuplikan milik pribadi tetap berada di perangkat Anda.
- Mengapa gambar baru muncul setelah saya klik Unduh di halaman alat?
- Di halaman mandiri, PNG dibuat saat Anda menekan Unduh, Salin gambar, atau Unduh SVG, sehingga mengetik tidak mengambil ulang gambar pada setiap ketukan tombol. Pratinjau bergaya tetap diperbarui secara langsung; di ruang kerja PNG dibangun ulang secara otomatis agar bisa mengalir ke alat berikutnya.
Alat terkait
Pemeriksa Kontras Warna
Periksa kontras WCAG 2.1 dan skor APCA Lc antara warna teks dan latar belakang, lihat lencana AA, AAA, dan 3:1, lalu terapkan warna lolos terdekat.
Pencampur Warna
Campurkan dua warna HEX pada rasio yang dipilih dalam ruang warna RGB atau Lab dan baca warna tengah hasilnya sebagai sampel dan nilai HEX yang dapat disalin.
Generator Gradasi Warna
Ubah satu warna HEX dasar menjadi skala OKLCH, HSL, atau RGB dengan langkah yang bisa diatur, petunjuk kontras WCAG per langkah, dan ekspor ke CSS, Tailwind, dan JSON.
Simulator Buta Warna
Unggah gambar dan pratinjau tampilannya dengan protanopia, deuteranopia, tritanopia, atau buta warna total, lalu unduh hasil simulasinya.