devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Audit Situs

Code to Image — Screenshot Kode yang Cantik

Tempel potongan kode dan dapatkan screenshot kode yang rapi dalam hitungan detik: syntax highlighting untuk JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go, dan PHP, pilihan tema, bingkai jendela dengan nama file, latar belakang gradasi atau transparan, jarak dalam (padding), dan nomor baris. Unduh PNG yang tajam (hingga 3×) atau SVG, atau langsung salin gambarnya ke clipboard.

Diperbarui

Data kamu tidak pernah meninggalkan komputer kamu. Semua proses berjalan 100% secara lokal di browser kamu.

Apakah alat ini membantu?0.0 0 penilaian
Format dan rapikan JavaScript minified atau berantakan secara gratisFormatter JavaScript →

Cara menggunakan Kode ke Gambar

  1. Tempel kode kamu, atau coba Contoh. Bahasanya dideteksi otomatis, atau kamu bisa memilihnya sendiri.
  2. Pilih tema, latar belakang, dan gaya jendela, lalu ketik nama file untuk judul jendela.
  3. Atur padding dan ukuran font; aktifkan nomor baris jika kamu akan merujuk ke baris tertentu.
  4. Unduh PNG (2× paling tajam di layar retina dan media sosial), SVG untuk dokumentasi, atau klik Salin gambar lalu tempel ke Slack, X, atau slide.

Kenapa membagikan kode sebagai gambar?

Di media sosial dan slide, kode dalam bentuk teks sering kehilangan format dan warnanya. Gambar kode mempertahankan indentasi, highlight, dan tata letak persis seperti yang kamu inginkan, tampil bagus di feed, dan tidak akan rusak oleh pengolah kata. Untuk dokumentasi yang akan disalin pembaca, tetap gunakan blok kode teks, dan tambahkan gambar hanya sebagai ilustrasi.

Cara gambarnya dibuat

Potongan kode disorot oleh tokenizer kecil bawaan yang mengenali komentar, string, angka, kata kunci, fungsi, dan properti untuk sepuluh bahasa umum, lalu digambar ke kanvas memakai font monospace bawaan sistem kamu. Ekspor PNG digambar ulang pada 1×, 2×, atau 3× agar tetap tajam; ekspor SVG menyimpan teks sebagai teks, sehingga bisa diperbesar berapa pun dan tetap bisa dicari. Semua proses berjalan di browser kamu.

Terkait: JavaScript Formatter, HTML Formatter, CSS Gradient Generator.

Juga dicari sebagai: code to image, screenshot kode, gambar dari kode, code screenshot, buat gambar kode, code to png, syntax highlight gambar, screenshot kode cantik.

Tool yang cocok dipakai bersama Kode ke Gambar

  • CSS Formatter — Ubah stylesheet yang di-minify menjadi CSS yang mudah dibaca, dengan satu properti per baris dan blok @media yang tersarang dengan benar.
  • Format JSON — Tempel JSON untuk dirapikan, di-minify, atau divalidasi.
  • Editor Markdown — Tulis Markdown dengan preview langsung berdampingan, toolbar format, dan pintasan keyboard.
  • Generator OG Image — Buat gambar preview tautan yang rapi untuk Facebook, LinkedIn, X, Slack, dan WhatsApp dalam hitungan detik.

Pertanyaan yang sering diajukan

Berapa ukuran gambar kode yang ideal untuk media sosial?
Gunakan PNG 2×: gambarnya tetap tajam di layar retina dan saat platform memampatkan ulang. Jaga potongan kode tetap pendek, sekitar 10–25 baris agar nyaman dibaca di feed.
Bisakah saya mendapatkan latar belakang transparan?
Bisa. Pilih latar belakang Transparan. PNG akan mempertahankan transparansi di sekitar jendela, yang berguna untuk slide dengan latar sendiri.
Bahasa apa saja yang disorot?
JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go, dan PHP. Bahasa lain bisa ditampilkan sebagai teks biasa dengan tema apa pun.
Apakah kode saya diunggah?
Tidak. Penyorotan dan rendering dilakukan di browser kamu; tidak ada yang dikirim ke server.
Bisakah saya memasang Kode ke Gambar sebagai aplikasi web dan memakainya offline?
Bisa. Kode ke Gambar adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.

Tool terkait

localFormatter JavaScriptRapikan dan beri indentasi JavaScript, JSON atau JSX sesuai preferensimu, dengan gaya kurung kurawal…localFormatter HTMLTempel markup yang berantakan atau sudah di-minify, lalu dapatkan HTML rapi dengan indentasi konsisten —…localCSS FormatterUbah stylesheet yang di-minify menjadi CSS yang mudah dibaca, dengan satu properti per baris dan blok…localFormat JSONTempel JSON untuk dirapikan, di-minify, atau divalidasi. Error ditunjukkan tepat di baris dan kolomnya,…localEditor MarkdownTulis Markdown dengan preview langsung berdampingan, toolbar format, dan pintasan keyboard. Draf kamu…localGenerator OG ImageBuat gambar preview tautan yang rapi untuk Facebook, LinkedIn, X, Slack, dan WhatsApp dalam hitungan…