Softonic

Kode ke gambar

Langkah 1 / 2

Tempel potongan kode, pilih salah satu dari empat tema bawaan, atur warna, ukuran font, padding, header opsional, dan nomor baris, lalu unduh PNG yang dirender dari canvas browser. Alat ini menggambar teks polos, cocok untuk gambar kode yang rapi, tetapi tidak membaca bahasa pemrograman dan tidak menambahkan penyorotan sintaks.

Cara membuat PNG kode

  1. 1

    Tempel cuplikan

    Gunakan kotak kode untuk JavaScript, HTML, CSS, JSON, perintah shell, atau teks polos lainnya. Renderer mengambil maksimal 400 baris pertama.

  2. 2

    Atur tampilan

    Pilih Gelap, Terang, Dracula, atau Solarized, lalu sesuaikan judul, ukuran font, padding, latar, teks, dan warna aksen.

  3. 3

    Periksa canvas

    Browser menggambar setiap baris sebagai teks canvas, dengan header jendela dan nomor baris opsional. Baris panjang dapat memperlebar canvas sampai batas maksimum bawaan.

  4. 4

    Unduh PNG

    Ekspor canvas saat ini sebagai gambar PNG untuk dokumentasi, catatan, slide, atau posting. Ekspor SVG, JPEG, dan HTML tidak tersedia.

Yang dilakukan renderer

Kontrol Yang bisa diubah Catatan
Tema Gelap, Terang, Dracula, Solarized Setiap tema mengatur warna awal latar, teks, dan aksen.
Gaya teks Judul, ukuran font, padding Ukuran font dibatasi 10–40 px dan padding 20–200 px.
Warna Latar, teks, aksen Warna aksen dipakai untuk nomor baris.
Header Header bergaya jendela aktif atau nonaktif Judul muncul di header saat diaktifkan.
Nomor baris Tampilkan atau sembunyikan Nomor digambar sebagai teks canvas biasa.
Ekspor Unduh PNG Tombol unduh menyimpan canvas saat ini sebagai gambar PNG.

Batas praktis

  • Browser menggambar cuplikan sebagai teks polos dengan Canvas API. JavaScript, Python, HTML, atau bahasa lain tidak dikenali.
  • Pratinjau memakai 400 baris pertama agar file sangat besar tidak membekukan halaman.
  • Lebar canvas dijaga antara 420 px dan 2200 px. Baris yang sangat panjang dapat mencapai lebar maksimum.
  • Versi dua langkah menyimpan input Anda di sessionStorage untuk tab browser saat ini saat berpindah dari edit ke unduh.

Catatan aksesibilitas

Kode di dalam gambar tidak bisa dicari, disalin, atau dibaca pembaca layar. Gunakan PNG sebagai pendamping visual, dan tetap sediakan cuplikan asli sebagai teks yang bisa dipilih saat menerbitkan dokumentasi, tutorial, atau laporan bug.

Pertanyaan yang Sering Diajukan

Tidak. Alat ini menggambar teks yang Anda tempel apa adanya ke canvas. Warna dan tema bisa diubah, tetapi tidak ada pemilih bahasa atau parser sintaks.

Menu berisi Gelap, Terang, Dracula, dan Solarized. Setelah memilih tema, Anda tetap bisa mengganti latar, teks, dan warna aksen.

Tidak. Output hanya unduhan PNG yang dibuat dari canvas. Tidak ada ekspor SVG, JPEG, atau salin sebagai HTML.

Pratinjau menggambar 400 baris pertama agar browser tetap responsif. Untuk gambar yang dipublikasikan, biasanya lebih baik memotong ke beberapa baris yang menjelaskan ide utama.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Konverter Ukuran File

Konversi antara byte, KB, MB, GB, TB, dan satuan biner IEC (KiB, MiB, GiB, TiB) dengan kombinasi desimal dan biner apa pun yang Anda inginkan.

JSON ke YAML

Konversi JSON ke YAML dengan penjelajaran yang tepat, penutupan string yang aman, skalar blok berbaris ganda, serta kunci yang tersortir untuk konfigurasi yang lebih rapi.

Obfuscator JavaScript

Obfuskasi JavaScript dengan pengodean array string, penggantian nama variabel, perataan alur kontrol, dan penyisipan kode mati untuk melindungi front-end.

Alat ini tersedia dalam bahasa lain