Ücretsiz geliştirici aracı

Kodunu paylaşılabilir bir görsele çevir

Kod parçanı yapıştır; tema, arka plan ve pencere stilini seç, satırları vurgula ve PNG ya da SVG olarak indir. Blog yazıları, sunumlar, dokümantasyon ve sosyal medya gönderileri için temiz, okunaklı kod görselleri hazırla.

Düzenleyiciyi aç Kayıt gerekmez

Ücretsiz
Tarayıcında çalışır
PNG ve SVG çıktı

Neler yapabilirsin?

Kod Kartı, ekran görüntüsü almaktan daha hızlı ve sonucu her zaman aynı netlikte.

Tema ve yazı tipi

Hazır renk temaları arasından seç ya da kendi VS Code temanı (.json) yükle. Yazı tipi, punto, satır yüksekliği ve ligatürleri ayarla.

Satır vurgulama

Önemli satırları vurgula, bir bölüme odaklanıp gerisini soldur, eklenen ve silinen satırları + / − ile işaretle, satırlara not ekle.

Gizli bilgileri bulanıklaştır

API anahtarı, parola ve token gibi değerleri tek tıkla otomatik bulanıklaştır ya da seçtiğin metni gizle.

Birden fazla blok

Kod, terminal, önce / sonra karşılaştırması ve Markdown metin bloklarını tek görselde yan yana ya da alt alta diz.

Sosyal medya boyutları

X (Twitter), LinkedIn, kare, dikey gönderi, hikâye ve bağlantı önizlemesi boyutlarına tek tıkla geç.

Kodu toparla

Prettier ile biçimlendir, ortak girintiyi kaldır, sekme ve boşlukları dönüştür, sondaki boşlukları temizle.

GitHub ve Gist'ten al

Bir GitHub dosyasının ya da Gist'in adresini ver; kod doğrudan düzenleyiciye gelsin.

İndir, kopyala, paylaş

PNG veya SVG indir, görseli panoya kopyala, erişilebilirlik için alt metni al. Hesabınla paylaşım linki ve gömme kodu oluştur.

Nasıl kullanılır?

Kodunu ekle

Düzenleyiciyi aç ve kodunu yapıştır ya da GitHub / Gist adresinden içe aktar. Ardından kodun dilini listeden seç.
Görünümü ayarla

Renk temasını, arka planı (düz renk, geçiş, ağ geçiş), pencere stilini ve çıktı boyutunu seç. Gerekirse satırları vurgula.
Dışa aktar

PNG veya SVG olarak indir, panoya kopyala ya da giriş yaparak paylaşım linki ve gömme kodu oluştur.

Nerede işine yarar?

Blog ve dokümantasyon

Yazılarında kod örneklerini tutarlı bir görünümle göster; SVG çıktı her ekranda net kalır.

Sosyal medya

X ve LinkedIn gönderilerinde kod paylaşırken doğru boyutta, okunaklı görseller kullan.

Sunum ve eğitim

Slaytlarda ve ders materyallerinde önemli satırları vurgulayarak anlatımı kolaylaştır.

Kod incelemesi

Önce / sonra bloğuyla bir değişikliği eklenen ve silinen satırlarıyla birlikte göster.

Kod kartı neden ekran görüntüsünden iyidir?

Editörden alınan ekran görüntüleri çoğu zaman kendi temanı, menü çubuklarını ve gereksiz boşlukları da içerir; ekranın çözünürlüğüne göre bulanık çıkabilir. Kod Kartı ise sadece kodu, seçtiğin tema ve boyutla yeniden çizer. Sonuç her seferinde aynı netlikte ve aynı ölçülerdedir.

SVG çıktı vektör olduğu için blog yazısında ya da sunumda büyütüldüğünde bile keskin kalır. PNG çıktıda dışa aktarma ölçeğini artırarak yüksek çözünürlüklü ekranlar için daha net görseller alabilirsin.

Görsele dönüştürülen kod arama motorları ve ekran okuyucular tarafından okunamaz. Bu yüzden düzenleyici, görselin içeriğini anlatan bir alt metni de hazırlar; görseli paylaşırken bu metni alt etiketi olarak kullanman önerilir. Kodun kopyalanabilir olması gereken yerlerde görselin yanında kodu metin olarak da vermek en iyisidir.

Sık sorulan sorular

Kod Kartı ücretsiz mi?

Evet. Düzenleyiciyi kullanmak, PNG ve SVG indirmek ücretsizdir ve hesap gerektirmez.

Kodum sunucuya gönderiliyor mu?

Görsel tarayıcında oluşturulur; indirdiğin PNG ve SVG dosyaları için kodun sunucuya gönderilmez. Yalnızca paylaşım linki oluşturduğunda görsel ve düzenleyici ayarları hesabınla birlikte kaydedilir.

Hangi programlama dillerini destekliyor?

JavaScript, TypeScript, Python, PHP, Java, C#, Go, Rust, SQL, HTML, CSS, JSON ve YAML gibi yaygın dillerin yanında daha birçok dil için sözdizimi renklendirmesi vardır. Listede olmayan içerik için düz metin seçebilirsin.

Paylaşım linki için neden giriş gerekiyor?

Paylaşılan görseller hesabına bağlı olarak saklanır; böylece "Paylaşımlarım" listesinden görebilir ve istediğin zaman silebilirsin.

Kendi VS Code temamı kullanabilir miyim?

Evet. VS Code renk temasının .json dosyasını (en fazla 1 MB) yükleyerek aynı renkleri görselde kullanabilirsin.

Ayarlarımı kaydedebilir miyim?

Evet. Beğendiğin ayarları ön ayar olarak kaydedebilirsin. Giriş yapmadıysan ön ayarlar bu tarayıcıda, giriş yaptıysan hesabında saklanır.

İlk kod kartını şimdi oluştur

Kayıt olmadan başla; paylaşım linki ve hesabında saklanan ön ayarlar için istediğin zaman ücretsiz giriş yapabilirsin.

Düzenleyiciyi aç