Koddan Görsele

Bir kod parçacığını tarayıcınızda söz dizimi vurgulu bir görsele dönüştürün; 20'den fazla dil, özel temalar ve arka planlar, satır numaraları ve PNG veya SVG dışa aktarma ile.

Araç yükleniyor…

Koddan Görsele — Bir parçacık yapıştırın, dilini seçin (veya otomatik algılamanın tahmin etmesine izin verin) ve bir tema; gradyan, düz, özel ya da saydam arka plan; ayarlanabilir eş aralıklı yazı tipi; satır numaraları ve düzenlenebilir bir pencere başlığıyla Carbon tarzı bir kod kartına biçim verin. Onu 1x–3x ölçekte PNG veya SVG olarak dışa aktarın ya da görseli doğrudan panoya kopyalayın. Söz dizimi vurgulama (Prism) ve görüntü yakalama (html-to-image) tamamen tarayıcınızda çalışır, böylece kodunuz asla yüklenmez.

Koddan Görsele nedir?

Koddan Görsele, bir kod parçacığını paylaşılabilir bir resme — bir blog yazısı, sunum, README veya sosyal medya gönderisi için söz dizimi vurgulu şık bir kod kartına — dönüştüren ücretsiz, tarayıcı tabanlı bir araçtır. JavaScript, TypeScript, Python, Go, Rust, Java, SQL ve daha fazlası dahil 20'den fazla dili vurgular ve kodunuzdan dili tahmin eden isteğe bağlı bir otomatik algılama sunar. Kartı yedi temadan biri, hazır bir gradyan, özel bir renk veya gradyan ya da saydam bir arka planla süsleyin, ardından eş aralıklı yazı tipini, yazı tipi boyutunu, dolguyu, satır numaralarını, pencere başlığını ve çıktı genişliğini ince ayarlayın. Kart, siz düzenledikçe canlı olarak işlenir ve onu 1x, 2x veya 3x PNG olarak dışa aktarabilir, SVG olarak kaydedebilir ya da panoya kopyalayabilirsiniz.

Koddan Görsele nasıl kullanılır

  1. Kodunuzu yapıştırın veya yazın ya da çalışma alanında başka bir aracın metin çıktısını giriş bağlantı noktasına bağlayın.
  2. Eşleşen dili seçin veya Ayarlar'da Otomatik algılamayı açarak aracın onu kodunuzdan tahmin etmesini sağlayın.
  3. Ayarlar'da bir tema ve bir arka plan seçin — hazır bir gradyan, özel bir düz renk ya da gradyan veya saydam.
  4. Eş aralıklı yazı tipini, yazı tipi boyutunu, dolguyu, satır numaralarını, pencere başlığını ve çıktı genişliğini zevkinize göre ince ayarlayın.
  5. Düzenledikçe canlı önizlemenin güncellenmesini izleyin; yakınlaştırma görünümünde büyütmek için üzerine tıklayın.
  6. Kartı 1x–3x PNG olarak dışa aktarın, SVG olarak indirin veya görseli panoya kopyalayın.

Örnekler

Satır numaralı bir Go parçacığı

Bir Go fonksiyonu yapıştırın, dilin sizin için seçilmesi için Otomatik algılamayı açın, satır numaralarını etkinleştirin, Nord temasını seçin ve bir eğitim için 2x PNG dışa aktarın.

Özel gradyanlı bir marka kartı

Arka planı Özel gradyan olarak ayarlayın, markanızın iki rengini ve bir açıyı seçin, app.tsx gibi bir pencere başlığı ekleyin ve görseli doğrudan panoya kopyalayın.

Belgeler için ölçeklenebilir bir SVG

Açık Snow temasını seçin, çıktı genişliğini ayarlayın ve bir SVG indirin, böylece kod kartı belgelerinizde her boyutta net kalır.

Sıkça sorulan sorular

Hangi dilleri vurgulayabilir?
JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift ve GraphQL dahil 20'den fazlasını. Menüden birini seçin veya dilin kodunuzdan tahmin edilmesi için Otomatik algılamayı açın.
Neyi ve hangi kalitede dışa aktarabilirim?
1x, 2x veya 3x piksel yoğunluğunda bir PNG dışa aktarın, vektörel bir SVG kaydedin ya da görseli doğrudan panoya kopyalayın. Saydam arka planı seçmek, PNG'nin kartın arkasında hiçbir arka plan olmadan bir alfa kanalını korumasını sağlar.
Kartın görünümünü değiştirebilir miyim?
Evet. Yedi tema arasında geçiş yapın, hazır bir gradyan, özel bir düz renk ya da gradyan veya saydam bir arka plan seçin ve eş aralıklı yazı tipini, yazı tipi boyutunu, dolguyu, satır numaralarını, düzenlenebilir pencere başlığını ve çıktı genişliğini ayarlayın.
Kodum herhangi bir yere yükleniyor mu?
Hayır. Hem söz dizimi vurgulama (Prism) hem de görüntü yakalama (html-to-image) tarayıcınızda %100 istemci tarafında çalışır. Kodunuz asla yüklenmez, sunucularımıza gönderilmez veya paylaşılmaz, böylece özel parçacıklar bile cihazınızda kalır.
Araç sayfasında neden İndir'e tıklayana kadar görüntü görünmüyor?
Bağımsız sayfada PNG, İndir, Görseli kopyala veya SVG indir düğmesine bastığınızda oluşturulur, böylece yazmak her tuş vuruşunda görüntüyü yeniden yakalamaz. Stilli önizleme yine de canlı olarak güncellenir; çalışma alanında PNG, sonraki araca akabilmesi için otomatik olarak yeniden oluşturulur.

İlgili araçlar

Renk Kontrastı Denetleyici

Metin ve arka plan rengi arasındaki WCAG 2.1 kontrastını ve APCA Lc puanını denetleyin, AA, AAA ve 3:1 rozetlerini görün ve en yakın geçen rengi uygulayın.

Renk Karıştırıcı

İki HEX rengi seçtiğiniz oranda RGB veya Lab renk uzayında harmanlayın ve ortaya çıkan ara rengi örnek ve kopyalanabilir HEX değeri olarak okuyun.

Renk Tonu Üretici

Tek bir temel HEX rengini ayarlanabilir adımlar, adım başına WCAG kontrast ipuçları ve CSS, Tailwind, JSON dışa aktarımıyla OKLCH, HSL veya RGB ölçeğine dönüştürün.

Renk Körlüğü Simülatörü

Bir görsel yükleyin ve protanopi, döteranopi, tritanopi veya tam renk körlüğünde nasıl göründüğünü önizleyin, ardından simüle edilmiş sonucu indirin.