Kode ke Gambar
Ubah cuplikan kode menjadi kartu PNG yang rapi dengan penyorotan sintaksis di browser Anda, dengan tema, latar gradien atau transparan, dan padding — tanpa unggah.
Kode ke Gambar — Tempel cuplikan, pilih bahasa, tema, latar, dan padding-nya, lalu ekspor kartu kode bergaya Carbon sebagai PNG transparan atau berlatar gradien. Penyorotan sintaksis (Prism) dan pengambilan gambar (html-to-image) sepenuhnya berjalan di browser Anda, sehingga kode Anda tidak pernah diunggah. Pratinjau diperbarui secara langsung saat Anda mengetik atau mengganti opsi.
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 yang dapat Anda sisipkan ke postingan blog, dek presentasi, README, atau unggahan media sosial. Alat ini populer di kalangan pengembang, penulis teknis, dan pendidik yang ingin kodenya terlihat disengaja alih-alih menempelkan tangkapan layar yang datar. Pilih penyorotan untuk JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python, atau Bash, lalu hiasi kartu dengan tema, latar gradien atau solid, dan padding pilihan Anda. Kartu dirender secara langsung saat Anda menyunting, dan satu tombol Unduh PNG mengekspornya pada resolusi 2x.
Cara menggunakan Kode ke Gambar
- Tempel atau ketik kode Anda di editor, atau hubungkan keluaran teks alat lain ke porta masukan di ruang kerja.
- Pilih bahasa yang sesuai — JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python, atau Bash — agar penyorotan sintaksis tepat.
- Buka Pengaturan untuk memilih tema (Midnight, Graphite, atau Snow), latar (Aurora, Sunset, Ocean, Slate, atau Transparan), dan padding (Rapat, Normal, atau Lapang).
- Perhatikan pratinjau langsung diperbarui saat Anda mengetik dan mengubah opsi; klik untuk memperbesarnya di tampilan zoom.
- Tekan Unduh PNG untuk menyimpan kartu sebagai gambar resolusi tinggi, atau, di ruang kerja, alirkan PNG langsung ke alat gambar berikutnya.
Contoh
Fungsi JavaScript untuk postingan blog
Tempel fungsi JavaScript singkat, pertahankan bahasa pada JavaScript, pilih tema Midnight dengan latar gradien Aurora, dan unduh PNG yang tajam untuk disematkan ke artikel alih-alih tangkapan layar yang datar.
Cuplikan CSS transparan untuk slide
Ganti bahasa ke CSS dan latar ke Transparan agar PNG yang diekspor tidak memiliki latar, sehingga kartu kode duduk rapi di atas latar slide berwarna.
Kartu perintah Bash untuk README
Pilih Bash, gunakan tema terang Snow dengan latar solid Slate dan padding Lapang, lalu ekspor kartu perintah yang bersih dan mudah dibaca untuk dokumentasi proyek Anda.
Pertanyaan yang sering diajukan
- Bahasa apa saja yang bisa disorot?
- Ia menyorot JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python, dan Bash. Pilih yang sesuai dengan cuplikan Anda dari menu dropdown bahasa; jika sebuah token tidak dapat diklasifikasikan, ia cukup kembali ke warna teks dasar.
- Format gambar apa yang diekspornya?
- Ia mengekspor PNG pada kerapatan piksel 2x untuk hasil yang tajam. Jika Anda memilih opsi latar Transparan, PNG mempertahankan kanal alfa tanpa latar apa pun di belakang kartu kode.
- Bisakah saya mengubah tampilan kartu?
- Bisa. Di Pengaturan Anda dapat beralih antara tema Midnight, Graphite, dan Snow, memilih latar Aurora, Sunset, Ocean, Slate, atau Transparan, serta mengatur padding Rapat, Normal, atau Lapang di sekitar kode.
- 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 PNG, sehingga mengetik tidak mengambil ulang gambar pada setiap ketukan tombol. Pratinjau bergaya tetap diperbarui secara langsung saat Anda menyunting; di ruang kerja PNG juga dibangun ulang secara otomatis agar bisa mengalir ke alat berikutnya.
Alat terkait
Pemeriksa Kontras Warna
Periksa rasio kontras WCAG antara warna HEX latar depan dan latar belakang serta lihat apakah lolos AA dan AAA untuk teks normal maupun besar.
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 gradasi 50-950 bergaya Tailwind, dicampur ke arah putih dan hitam, setiap langkah dengan sampel dan HEX yang bisa disalin.
Simulator Buta Warna
Unggah gambar dan pratinjau tampilannya dengan protanopia, deuteranopia, tritanopia, atau buta warna total, lalu unduh hasil simulasinya.