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

Generator Konfigurasi Webpack

Buat webpack.config.js untuk webpack 5 bagi JavaScript biasa, React, atau Vue: TypeScript, Babel, CSS atau Sass, gambar, HtmlWebpackPlugin, server pengembangan, dan baris npm install.

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.

Validator OpenAPI

Tempel dokumen OpenAPI atau Swagger dalam JSON atau YAML dan periksa struktur intinya: bidang versi, objek info, dan paths, dengan galat dan peringatan yang jelas.

Generator Loader CSS

Buat spinner lingkaran CSS murni: atur diameter, ketebalan border, warna dan kecepatan rotasi, lihat pratinjau langsung, lalu salin CSS siap pakai. Tanpa SVG, tanpa JavaScript.

Pemformat PHP

Tambahkan baris baru dan indentasi 2 atau 4 spasi ke cuplikan PHP sederhana. Periksa hasilnya: alat ini bukan parser PHP dan tidak menerapkan PSR-12.

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.

Alat ini tersedia dalam bahasa lain