Kodu görsele çevirme

Nasıl çalışır?

Kodunuzu düzenleyiciden kopyalayıp sol kutuya yapıştırın. Görsel siz yazdıkça sağda yeniden çizilir. Sekme karakterleri 4 boşluğa çevrilir, satır sonundaki boşluklar ve baştaki-sondaki boş satırlar atılır; girinti olduğu gibi kalır. Görselin genişliği en uzun satıra göre ayarlanır, satırlar kaydırılmaz. Örnek: 12 satırlık, en uzun satırı 60 karakter olan bir JavaScript fonksiyonu 2× çözünürlükte yaklaşık 1400 piksel genişliğinde bir PNG olur ve Twitter/X ya da LinkedIn'de net görünür. 100 karakteri aşan satır görseli çok genişletir; sonuç satırı bunu söyler, satırı bölmeniz daha okunaklı olur. Bir görsele en çok 400 satır sığar. Kodunuz tarayıcınızda çizilir, hiçbir sunucuya gönderilmez.

Bu araç code to image, carbon alternatifi, code snippet image aramalarıyla da biliniyor.

Kod görseli nedir?

Kod görseli, bir kod parçasının metin olarak değil resim olarak paylaşılmış hâlidir. Sunum slaytlarında, blog kapaklarında ve sosyal medya gönderilerinde kullanılır; çünkü bu yerlerde metin kutusu girintiyi bozar ya da sabit genişlikli yazı tipi göstermez. Resimdeki kod kopyalanamaz; okuyucunun kodu çalıştırması gerekiyorsa görselin yanına metin hâlini de ekleyin.

Sabit genişlikli yazı tipi (monospace) nedir?

Sabit genişlikli yazı tipinde her karakter aynı genişliği kaplar: i harfi de m harfi de aynı yeri tutar. Kod bu yüzden bu tür yazı tipiyle gösterilir; girintiler ve alt alta hizalanmış satırlar ancak böyle düzgün durur. Araç cihazınızdaki kod yazı tipini kullanır (Mac'te SF Mono ya da Menlo, Windows'ta Consolas).

Kod görseli ile ekran görüntüsü arasındaki fark nedir?

Düzenleyicinin ekran görüntüsü; menüleri, sekmeleri, hata çizgilerini ve ekranın çözünürlüğünü de alır, kırpması zahmetlidir ve küçük ekranda yazı bulanık çıkar. Kod görseli yalnız kodu çizer: kenar boşluğu, satır numarası ve zemin her seferinde aynıdır, 2× çözünürlükte keskin kalır ve kişisel dosya adları ya da proje yolları görünmez. Kodun bulunduğu ortamı göstermek istiyorsanız ekran görüntüsü, kodun kendisini paylaşacaksanız kod görseli.

Renklendirme neden yok, satırlar neden kaydırılmıyor?

Bu araç kodu tek renkle yazar; anahtar kelimeleri ayrı renge boyamaz. Renklendirme her dil için ayrı kural ister ve yanlış tanınan bir dil, düz yazıdan daha karışık bir görsel üretir. Satır numaraları soluk renkte, kod ise yüksek karşıtlıkta çizilir; slaytta ve telefonda okunaklılık önceliklidir.

Satırlar kaydırılmaz, çünkü kaydırılmış kod yanlış okunur: Python'da girinti anlam taşır, alt satıra düşen bir parça yeni satır sanılır. Uzun satır varsa görsel genişler ve sonuç satırı uyarır; paylaşmadan önce satırı kodun kendisinde bölmek en temiz çözümdür.

Nerede hangi ayarı seçmeli?

Sosyal medyada koyu kart ve renkli zemin öne çıkar; gradyan zemin görseli akışta fark edilir kılar. Açık tema, beyaz arka planlı slayt ve belgelerde daha az göz yorar ve yazıcıda mürekkep harcatmaz.

Görseli başka bir tasarımın içine koyacaksanız "Zeminsiz" seçin: yalnız kod kartı kalır, köşeler saydam olur. Satır numaralarını, konuşmada "5. satıra bakalım" diyecekseniz açık bırakın; tek satırlık bir komut için kapatmak daha sadedir.

Sık sorulanlar

Kodu görsele nasıl çeviririm?

Kodunuzu bu sayfadaki sol kutuya yapıştırın. Sağda pencere görünümlü kod görseli hemen çizilir. Rengi ve zemini seçip "İndir"e basın; PNG dosyası İndirilenler klasörünüze iner.

Kodum bir sunucuya gönderiliyor mu?

Hayır. Görsel tarayıcınızın içinde çizilir; kod hiçbir yere yüklenmez. Şirket içi ya da gizli kod parçalarını da güvenle çevirebilirsiniz.

Sözdizimi renklendirmesi var mı?

Hayır, kod tek renkle yazılır ve satır numaraları soluk gösterilir. Bu, her dilde aynı ve yanlış renklendirme riski olmayan bir sonuç verir.

Görsel neden çok geniş çıktı?

Görselin genişliği en uzun satıra göre ayarlanır ve satırlar kaydırılmaz. 100 karakteri geçen bir satır görseli genişletir; o satırı kodda bölerseniz görsel daralır.