📸 Code Screenshot — Beautiful Code Images

Tam Rehber: Code Screenshot — Güzel Kod Görselleri

Kod Ekran Görüntüleri Neden Önemli?

Geliştiricilerin Twitter/X, LinkedIn, dev.to, Hashnode ve yüzlerce teknik bültende bilgi paylaştığı günümüzde, düz metin kod blokları çoğu zaman istenen etkiyi yaratamaz. Özenle hazırlanmış bir kod ekran görüntüsü ise profesyonellik, özen ve netliği anında iletir. Platformun Markdown veya sözdizimi vurgulama desteği olup olmadığından bağımsız olarak her akışta mükemmel görünür. Görsel, insanların ilk gördüğü şeydir — ilk izlenim ise etkileşimi doğrudan belirler.

Kod ekran görüntülerinin gerçek değer kattığı günlük senaryoları düşünün. Bir blog yazısı veya öğretici içerik hazırlarken ham bir kod bloğu yerine şıkça stilize edilmiş bir ekran görüntüsü kullanmak okuyuculara görsel bir duraklatma noktası sunar, makaleyi cilalı gösterir ve belirli satırlara açıklama eklemenize olanak tanır. Sunumlarda ve slayt destelerinde (Google Slaytlar, PowerPoint, Keynote) hoş bir gradyan arka planlı ekran görüntüsü, her seferinde sade beyaz bir kod bloğunu geride bırakır.

Sosyal medyada — özellikle açıklamaları kısıtlayan karakter limitleriyle Twitter/X'te — bir kod ekran görüntüsü tek bakışta tüm bir kavramı aktarır. Sosyal platformlarda düzenli paylaşım yapan mühendisler, güzel bir ekran görüntüsünün ham metin dizisinden çok daha fazla retweet ve kayıt aldığını bilir. Görsel format ayrıca girintilemeyi mükemmel biçimde korur; kodu bir tweete kopyalayıp boşlukların kaybolmasını izlemek zorunda kalmazsınız.

Pull request açıklamaları da göz ardı edilen bir kullanım senaryosudur. Değişen ana fonksiyonun ekran görüntüsünü PR açıklamasına yapıştırmak, gözlemcilerin tam diff'i çözümlemeden niyeti anında anlamasına yardımcı olur. Öğretim ve canlı kodlama oturumları da benzer şekilde yararlanır: Bir ekrana yansıtılan kodun, odanın arkasından veya küçük bir Zoom penceresinden okunabilmesi için yüksek kontrast ve temiz bir arka plana ihtiyacı vardır.

Araç Nasıl Kullanılır: Adım Adım

1. Kodunuzu yapıştırın. Düzenleyici alanına tıklayın ve herhangi bir kod parçacığını yapıştırın ya da yazın. Düzenleyici Python, JavaScript, TypeScript, Rust, Go, SQL, Bash, HTML, CSS ve daha fazlasını kabul eder. Sözdizimi vurgulama, ilk anlamlı jetonlardan algılanan dile göre otomatik uygulanır.
2. Bir sözdizimi teması seçin. Yedi profesyonelce seçilmiş temadan birini seçmek için tema açılır menüsünü kullanın.
3. Arka plan gradyanı seçin. Kod penceresinin arkasındaki arka plan sekiz gradyan seçeneğinden biridir. Gradyanlar görüntüye derinlik ve görsel ilgi katarak herhangi bir akış arka planında öne çıkmasını sağlar.
4. Mac pencere noktalarını açıp kapatın. Pencere çerçevesindeki macOS tarzı trafik ışığı düğmelerini etkinleştirin veya devre dışı bırakın. Etkinleştirmek tanıdık bir düzenleyici hissi ekler; devre dışı bırakmak daha sade, daha soyut bir görünüm üretir.
5. Dolgu miktarını ayarlayın. Kod penceresinin etrafındaki dolgu için Küçük, Orta, Büyük veya XL seçin. Daha fazla dolgu gradyanı ön plana çıkarır ve görüntüye geniş, poster benzeri bir kalite katar.
6. Yazı tipi boyutunu ayarlayın. Sunumlar ve mobil öncelikli görüntüler için kodu büyütün; yoğun çok satırlı parçacıklar için küçültün.
7. PNG Dışa Aktar'a tıklayın. Araç, Retina kalitesinde PNG üretmek için 2× piksel yoğunluğunda html2canvas kullanır. İndirme anında başlar; kayıt gerekmez.

Tema Rehberi: Her Tema Ne Zaman Kullanılır?

Dracula — Koyu lacivert arka plan üzerinde mor ve pembe tonlar. Kalın, özgün paleti nedeniyle sosyal medyada en popüler koyu temadır. JavaScript, TypeScript ve CSS için idealdir. Serin tonlu gradyan arka planlarıyla (mavi, mor, gece yarısı) en iyi eşleşir.

VS Dark (Visual Studio Dark+) — Dünyanın en çok kullanılan düzenleyicisinin varsayılan koyu teması. Geniş bir geliştirici kitlesine anında tanıdık gelir. Stilize değil "gerçek" görünmesini istediğiniz profesyonel blog yazıları için harikadır.

Night Owl — Düşük ışık okunabilirliği için Sarah Drasner tarafından tasarlandı. Zengin deniz mavisi ve sıcak sarı tonlar. Çok sayıda dizge sabiti içeren diller için mükemmeldir (Python, JSON).

One Dark — Atom düzenleyicisinin efsanevi koyu teması. Dengeli yeşil, turuncu ve kırmızı tonlar. Go veya Rust gibi yoğun operatör kullanımlı diller için en iyisidir.

GitHub Dark — GitHub.com'da kullanılan resmi koyu tema. İnce ve gösterişsiz. PR açıklamaları için mükemmeldir.

Monokai — Klasik. Sarı-yeşil anahtar sözcükler, macenta dizgeler, turuncu sayılar. Sublime Text döneminden tanınan bir tema.

VS Light — Açık tema seçeneği. Beyaz arka plan üzerinde mavi anahtar sözcükler. Baskı medyası ve beyaz arka planlı dokümantasyon siteleri için idealdir.

Arka Plan Gradyanı Seçim İpuçları

Gradyan, kod sanatınızın çerçevesidir. Birkaç ilke yardımcı olur: kod penceresinin arka plan rengiyle yeterli kontrastı olan gradyanlar kullanın. Sosyal paylaşım için doygun gradyanlar (aurora, sunset, neon) kayan akışta gözü daha iyi çektiğinden daha iyi performans gösterir. Dokümantasyon ve öğretim materyalleri için daha narin gradyanlar (nordic, pastel, ocean) odağı kodda tutar.

Dışa Aktarma Kalitesi: 2× Retina PNG

Dışa aktarma motoru, scale: 2 ile yapılandırılmış html2canvas kullanarak kod penceresini iki katı ekran piksel yoğunluğunda işler. Bu, ekranda 600×400 piksel görünen bir kod penceresinin 1200×800 piksel PNG olarak dışa aktarıldığı anlamına gelir. Retina ekranlarda (MacBook, iPhone, modern Android) görüntü mükemmel keskinliktedir. Dosya tamamen tarayıcınızda oluşturulur; sunucuya hiçbir kod yüklenmez.

Kullanım Senaryoları

Dokümantasyon: API referans dokları, açık kaynak projeler için README dosyaları ve dahili wikiler tutarlı, yüksek kaliteli kod görüntülerinden yararlanır.

Sosyal medya paylaşımı: Kod ipuçları, gotcha'lar, tek satırlıklar veya akıllı kalıplar yayınlayın. Dracula ve Night Owl temaları Twitter/X ve LinkedIn'de en iyi performansı gösterir.

Öğretim ve kurslar: Udemy ve Teachable gibi çevrimiçi kurs platformları sabit genişlikte video çerçeveleri kullanır; büyük yazı tipi boyutu ve XL dolgu ile görüntü çerçeveyi doldurur.

Pull request açıklamaları: GitHub, PR açıklamalarında görsel yüklemeyi destekler. Değişen ana fonksiyonun hızlı bir ekran görüntüsü, gözlemcilerin diff'e girmeden önce değişikliği anlamasına yardımcı olur.

carbon.now.sh ve ray.so ile Karşılaştırma

Carbon (carbon.now.sh) ilk büyük kod ekran görüntüsü aracıydı ve hâlâ yaygın kullanılmaktadır; ancak işlemek için harici ağ isteği gerektirir. Ray.so (Raycast tarafından) çok cilalı görüntüler üretir, sınırlı ücretsiz katmanı vardır ve macOS kullanıcıları için optimize edilmiştir. Bu araç tamamen tarayıcıda çevrimdışı çalışır; sayfa yüklendikten sonra internet bağlantısı gerekmez, API limiti yoktur, hesap açmak gerekmez.

Sıkça Sorulan Sorular

Filigran kodumu kapatiyor mu? Hayır. "onhtml.com" kredisi, gradyan arka planının alt köşesinde küçük, yarı saydam bir etikettir; kod penceresinin üzerine asla binmez.

PNG çözünürlüğü nedir? Oluşturulan ekran boyutunun 2 katı. Tipik dışa aktarmalar 1200–1600 piksel genişliğindedir.

Otomatik sözdizimi vurgulama destekliyor mu? Evet. Düzenleyici dili kod içeriğinden algılar. Otomatik algılama yanlış seçerse dil seçiciden manuel olarak ayarlayabilirsiniz.

Kodum herhangi bir sunucuya gönderiliyor mu? Hayır. Tüm işlemler html2canvas aracılığıyla tarayıcınızda gerçekleşir. Kodunuz cihazınızdan asla çıkmaz.

Dışa aktarılan görseli ticari amaçla kullanabilir miyim? Evet. Dışa aktarılan PNG'nin nasıl kullanılacağına dair hiçbir kısıtlama yoktur.

Ekran görüntüsü almadan önce kodunuzu biçimlendirmek için Kod Güzelleştirici'yi deneyin. Markdown belgeleri önizlemek için Markdown Önizleme'yi kullanın. Veritabanı ile ilgili ekran görüntüleri için sorgularınızı önce SQL Formatlayıcı ile biçimlendirin.