Softonic

Kodu görsele dönüştür

Adım 1 / 2

Bir kod parçası yapıştırın, dört yerleşik temadan birini seçin, renkleri, yazı boyutunu, boşluğu, isteğe bağlı başlığı ve satır numaralarını ayarlayın; ardından tarayıcı canvasından çizilen PNG dosyasını indirin. Araç düz metin çizer: temiz kod görselleri için kullanışlıdır, ancak dilleri çözümlemez ve sözdizimi vurgusu eklemez.

Kod PNG dosyası nasıl oluşturulur

  1. 1

    Parçayı yapıştırın

    Kod alanını JavaScript, HTML, CSS, JSON, shell komutları veya herhangi bir düz metin için kullanın. Oluşturucu en fazla ilk 400 satırı alır.

  2. 2

    Görünümü ayarlayın

    Koyu, Açık, Dracula veya Solarized seçin; ardından başlık, yazı boyutu, boşluk, arka plan, metin ve vurgu rengini ayarlayın.

  3. 3

    Canvas önizlemesini kontrol edin

    Tarayıcı her satırı canvas metni olarak çizer; pencere başlığı ve satır numaraları isteğe bağlıdır. Uzun satırlar canvası yerleşik üst sınıra kadar genişletebilir.

  4. 4

    PNG indirin

    Geçerli canvası dokümantasyon, notlar, slaytlar veya paylaşımlar için PNG görseli olarak dışa aktarın. SVG, JPEG veya HTML dışa aktarımı yoktur.

Oluşturucu ne yapar

Kontrol Neyi değiştirebilirsiniz Notlar
Tema Koyu, Açık, Dracula, Solarized Her tema başlangıç arka plan, metin ve vurgu renklerini ayarlar.
Metin stili Başlık, yazı boyutu, boşluk Yazı boyutu 10–40 px, boşluk 20–200 px aralığıyla sınırlıdır.
Renkler Arka plan, metin, vurgu Vurgu rengi satır numaralarında kullanılır.
Başlık Pencere tarzı başlık açık veya kapalı Etkinken başlık bu alanda görünür.
Satır numaraları Göster veya gizle Numaralar düz canvas metni olarak çizilir.
Dışa aktarma PNG indirme İndirme düğmesi geçerli canvası PNG görseli olarak kaydeder.

Pratik sınırlar

  • Tarayıcı kod parçasını Canvas API ile düz metin olarak çizer. JavaScript, Python, HTML veya başka bir dili algılamaz.
  • Önizleme, çok büyük dosyaların sayfayı kilitlememesi için ilk 400 satırı kullanır.
  • Canvas genişliği 420 px ile 2200 px arasında tutulur. Çok uzun satırlar üst sınıra ulaşabilir.
  • İki adımlı sürümde, düzenlemeden indirmeye geçerken girdileriniz geçerli tarayıcı sekmesi için sessionStorage içinde tutulur.

Erişilebilirlik notu

Görselin içindeki kod aranamaz, kopyalanamaz ve ekran okuyucular tarafından okunamaz. PNG dosyasını görsel destek olarak kullanın; dokümantasyon, eğitim veya hata raporu yayımlarken gerçek kod parçasını seçilebilir metin olarak yanında tutun.

Sık Sorulan Sorular

Hayır. Yapıştırdığınız metni olduğu gibi canvas üzerine çizer. Renkleri ve temaları değiştirebilirsiniz, ancak dil seçici veya sözdizimi ayrıştırıcısı yoktur.

Menüde Koyu, Açık, Dracula ve Solarized bulunur. Tema seçtikten sonra arka plan, metin ve vurgu renklerini yine de değiştirebilirsiniz.

Hayır. Çıktı, canvas üzerinden oluşturulan bir PNG indirmesidir. SVG, JPEG veya HTML olarak kopyalama yoktur.

Önizleme, tarayıcının hızlı kalması için ilk 400 satırı çizer. Yayınlanacak görsellerde genellikle fikri anlatan birkaç satıra inmek daha iyidir.

İlgili Araçlar

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Tamamlayıcı Renk Bulucusu

Her girdi için tamamlayıcı renk belirleyin. HSL açısından tersi renk, bölünmüş tamamlayıcı çifti ve erişilebilir kombinasyonlar için öneriler geri verir.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Webpack Yapılandırma Oluşturucu

Saf JavaScript, React veya Vue için webpack 5 uyumlu bir webpack.config.js oluşturun: TypeScript, Babel, CSS veya Sass, görseller, HtmlWebpackPlugin, geliştirme sunucusu ve npm install satırı.

CSS Yükleyici Oluşturucu

Saf CSS ile dairesel bir spinner oluşturun: çapı, kenarlık kalınlığını, rengi ve dönüş hızını ayarlayın, canlı önizlemeyi izleyin ve kullanıma hazır CSS kodunu kopyalayın. SVG yok, JavaScript yok.

Araç diğer dillerde mevcuttur