Koddan Görsele
Bir kod parçacığını tarayıcınızda, tema, gradyan veya saydam arka plan ve dolgu seçenekleriyle şık, söz dizimi vurgulu bir PNG kartına dönüştürün — yükleme yok.
Koddan Görsele — Bir parçacık yapıştırın, dilini, temasını, arka planını ve dolgusunu seçin ve Carbon tarzı bir kod kartını saydam veya gradyan arka planlı PNG olarak dışa aktarı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. Önizleme, yazdıkça veya seçenekleri değiştirdikçe canlı olarak güncellenir.
Koddan Görsele nedir?
Koddan Görsele, bir kod parçacığını paylaşılabilir bir resme — bir blog yazısına, sunuma, README'ye veya sosyal medya gönderisine ekleyebileceğiniz, söz dizimi vurgulu şık bir kod kartına — dönüştüren ücretsiz, tarayıcı tabanlı bir araçtır. Düz bir ekran görüntüsü yapıştırmak yerine kodlarının özenli görünmesini isteyen geliştiriciler, teknik yazarlar ve eğitimciler arasında popülerdir. JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python veya Bash vurgulamasından birini seçin, ardından kartı bir tema, gradyan ya da düz bir arka plan ve tercih ettiğiniz dolgu ile süsleyin. Kart, siz düzenledikçe canlı olarak işlenir ve tek bir PNG İndir düğmesi onu 2x çözünürlükte dışa aktarır.
Koddan Görsele nasıl kullanılır
- Kodunuzu düzenleyiciye 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.
- Söz dizimi vurgulamasının doğru olması için eşleşen dili — JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python veya Bash — seçin.
- Bir tema (Midnight, Graphite veya Snow), bir arka plan (Aurora, Sunset, Ocean, Slate veya Saydam) ve dolguyu (Sıkı, Normal veya Ferah) seçmek için Ayarlar'ı açın.
- Yazdıkça ve seçenekleri değiştirdikçe canlı önizlemenin güncellenmesini izleyin; yakınlaştırma görünümünde büyütmek için üzerine tıklayın.
- Kartı yüksek çözünürlüklü bir resim olarak kaydetmek için PNG İndir'e basın veya çalışma alanında PNG'yi doğrudan sonraki bir görüntü aracına aktarın.
Örnekler
Bir blog yazısı için JavaScript fonksiyonu
Kısa bir JavaScript fonksiyonu yapıştırın, dili JavaScript olarak bırakın, Aurora gradyan arka planlı Midnight temasını seçin ve düz bir ekran görüntüsü yerine bir makaleye gömmek için keskin bir PNG indirin.
Slaytlar için saydam bir CSS parçacığı
Dili CSS'e ve arka planı Saydam'a değiştirin, böylece dışa aktarılan PNG'nin arka planı olmaz ve kod kartı renkli bir slayt arka planının üzerinde temiz bir şekilde durur.
Bir README için Bash komut kartı
Bash'i seçin, Slate düz arka planlı ve Ferah dolgulu açık Snow temasını kullanın ve projenizin belgeleri için temiz, okunaklı bir komut kartı dışa aktarın.
Sıkça sorulan sorular
- Hangi dilleri vurgulayabilir?
- JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python ve Bash'i vurgular. Dil açılır menüsünden parçacığınıza uyanı seçin; bir belirteç sınıflandırılamazsa basitçe temel metin rengine geri döner.
- Hangi görüntü biçiminde dışa aktarır?
- Keskin sonuçlar için 2x piksel yoğunluğunda bir PNG dışa aktarır. Saydam arka plan seçeneğini seçerseniz, PNG kod kartının arkasında hiçbir arka plan olmadan bir alfa kanalını korur.
- Kartın görünümünü değiştirebilir miyim?
- Evet. Ayarlar'da Midnight, Graphite ve Snow temaları arasında geçiş yapabilir, Aurora, Sunset, Ocean, Slate veya Saydam bir arka plan seçebilir ve kodun çevresine Sıkı, Normal veya Ferah dolgu ayarlayabilirsiniz.
- 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, PNG İndir'e bastığınızda oluşturulur, böylece yazmak her tuş vuruşunda görüntüyü yeniden yakalamaz. Stilli önizleme yine de düzenledikçe 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
Bir ön plan ve arka plan HEX rengi arasındaki WCAG kontrast oranını denetleyin ve normal ile büyük metin için AA ve AAA'yı geçip geçmediğini görü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, beyaza ve siyaha doğru karıştırarak Tailwind tarzı 50-950 ton ölçeğine dönüştürün; her adımda bir renk örneği ve kopyalanabilir HEX değeri.
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.