Ücretsiz Online Kod Ekran Görüntüsü Oluşturucu

Kaynak kodunuzu yüksek çözünürlüklü, sözdizimi vurgulu ekran görüntüsü maketlerine dönüştürün. macOS pencere stillerini, temaları ve arka plan gradyanlarını seçin.

Şık kod ekran görüntüleri

Kodunuzu yapıştırın, bir dil ve tema seçin, ekran boyutunun iki katında bir PNG indirin.

13 sözdizimi teması
29 dil
macOS, Windows, Tarayıcı çerçeveleri
2x PNG dışa aktarma

Kayıt gerekmez. Tamamen tarayıcınızda çalışır.

Kod ekran görüntülerini kimler kullanır?

Bir gönderide, slaytta veya derste okunabilir kod isteyen, dağınık bir düzenleyici ekran görüntüsü kullanmak istemeyen herkes için.

Geliştiriciler ve mühendisler

Bir kod parçasını LinkedIn'de, X'te veya bir geliştirici forumunda renklerini ve boşluklarını koruyan bir görsel olarak paylaşın. Akışlar için koyu, dokümanlar için açık bir tema seçin.

Sosyal medya gönderisi için derli toplu bir kod görseli
Portföy veya README için proje öne çıkanları
macOS veya Windows çerçeveli kısa bir kod ipucu

Teknik yazarlar

Kod bloklarının iyi görüntülenmediği blog yazılarına, eğitimlere ve bültenlere kod görselleri ekleyin. Bir serideki tüm görseller uyumlu olsun diye tek bir tema ve dolgu kullanın.

Blog yazıları ve bültenler için kod görselleri
Video küçük resmi veya intro için bir kod karesi
E-kitap veya kurs sayfası için uyumlu kod parçaları

Eğitmenler ve konuşmacılar

Slaytlara ve dağıtım notlarına okunabilir kod koyun. Büyük bir salon için yazı boyutunu 20 px'e yükseltin, basılı sayfalar için açık bir tema kullanın.

Konferans slaytlarında büyük, okunabilir kod
Çevrimiçi kurs dersleri için örnek kod
Basılı atölye sayfaları için açık temalı kod parçaları

Temalar, Çerçeveler ve Arka Planlarla Koddan Görsele

29 dil, 13 tema, dört pencere stili, 13 arka plan ile bir renk seçici ve yazı boyutu ile dolgu için kaydırıcılar.

Tek bir Python kod parçasının Dracula, Nord ve GitHub Light temalarındaki, her biri macOS pencere çerçevesinde olan kod ekran görüntüsü

Kodu 13 Sözdizimi Temasıyla Vurgulayın

Dili seçin, ardından Dracula, Nord, Tokyo Night ve GitHub Light gibi temalar arasında geçiş yapın. Anahtar sözcükler, dizeler ve yorumlar temanın renklerini alır ve önizleme her değişiklikte yeniden çizilir.

Python'dan Terraform'a 29 dil
10 koyu ve 3 açık tema
Anahtar sözcükler, dizeler ve yorumlar renklendirilir

Hemen deneyin

Bir TypeScript kod parçasının dört arka plan üzerinde macOS, Windows, Tarayıcı ve çerçevesiz stillerdeki kod ekran görüntüsü

Kodu Pencere ve Arka Planla Çerçeveleyin

Kod parçasını macOS, Windows veya Tarayıcı çubuğuyla sarın ya da çıplak gösterin. Ardından arka planı 9 düz renkten, 4 gradyandan veya seçeceğiniz herhangi bir renkten birine ayarlayın.

macOS, Windows, Tarayıcı veya çerçevesiz
9 düz renk, 4 gradyan, özel renk
0 ile 80 px arası dolgu

Hemen deneyin

2x PNG İndirin

PNG'yi indir, arka plan dahil çerçeveli görselin tamamını ekrandaki boyutunun iki katında kaydeder. Dosya code-screenshot.png adını taşır; birkaç tane kaydederseniz yeniden adlandırın.

Yazı Boyutu ve Sekme Başlığı

Kod boyutunu 11 ile 20 px arasında ayarlayın ve pencere çubuğu için index.ts gibi bir dosya adı yazın. Kod, cihazınızın eş aralıklı yazı tipini kullanır.

Ücretsiz, Kayıt Yok, Filigran Yok

Hesap veya günlük sınır olmadan istediğiniz kadar kod görseli oluşturun. PNG yalnızca kodunuzu ve çerçevenizi içerir, logo eklenmez.

Önizleme Siz Düzenledikçe Yeniden Çizilir

Kod, tema, çerçeve veya kaydırıcılarda yaptığınız değişiklikler siz yaptıkça önizlemede görünür. Yeni renkler hesaplanırken görsel kısa süreliğine soluklaşır.

3 adımda kod ekran görüntüsü nasıl oluşturulur

Kodunuzu yapıştırın.

Ekran görüntüsü oluştur düğmesine tıklayın, kod parçasını Kod kutusuna yapıştırın ve listeden dilini seçin. Otomatik algılama yoktur, bu yüzden uyan dili seçin.

Görseli biçimlendirin.

Bir tema, bir pencere stili ve bir arka plan seçin, ardından yazı boyutu ve dolgu kaydırıcılarını ayarlayın. Çubukta bir dosya adı görünsün istiyorsanız sekme başlığı ekleyin.

PNG'yi indirin.

Önizlemeyi kontrol edin, ardından PNG'yi indir düğmesine tıklayın. Önizleme boyutunun iki katında, gönderi, doküman veya slayt için hazır code-screenshot.png dosyasını alırsınız.

Sık sorulan sorular

Diller, temalar, satır numaraları, arka planlar ve indirdiğiniz PNG hakkında yanıtlar.

Kodu nasıl görsele dönüştürürüm?

Düzenleyiciyi açın, kod parçanızı yapıştırın ve dilini seçin. Bir tema, bir pencere çerçevesi ve bir arka plan seçin, ardından PNG'yi indir düğmesine tıklayın. Görsel, önizleme boyutunun iki katında code-screenshot.png olarak cihazınıza kaydedilir ve paylaşmaya ya da slayta eklemeye hazırdır.

Hangi programlama dillerini vurgulayabilirim?

29 dil arasından seçim yapabilirsiniz: TypeScript, JavaScript, Python, Rust, Go, Java, Kotlin, Swift, C, C++, C#, Ruby, PHP, HTML, CSS, SCSS, JSON, YAML, TOML, Bash, shell, SQL, GraphQL, Markdown, Dockerfile, Terraform, Vue, JSX ve TSX. Liste kısa kimlikleri gösterir; bu yüzden C++ cpp, C# ise csharp olarak görünür.

Hangi sözdizimi temaları mevcut?

13 tema var. On tanesi koyu: Vitesse Dark, GitHub Dark, Dracula, Nord, One Dark Pro, Monokai, Catppuccin Mocha, Tokyo Night, Min Dark ve Solarized Dark. Üçü açık: Vitesse Light, GitHub Light ve Solarized Light. Düzenleyici Vitesse Dark ile başlar.

Kod görselinde satır numaralarını gösterebilir miyim?

Şu an için hayır. Düzenleyicide Satır numaralarını göster kutusu var ancak henüz numara eklemiyor, bu yüzden PNG'de numara olmaz. Okuyucuları bir satıra yönlendirmek için o satırı metninizde alıntılayın veya kodun içine kısa bir yorum ekleyin.

İndirilen PNG hangi boyutta?

PNG, çerçeveli önizlemenin her yönde iki katı boyutundadır. Çerçeve ekranda en az 400 px genişliğindedir, dolayısıyla dosya en az 800 px genişliğinde olur. Daha uzun satırlar, daha büyük bir yazı boyutu veya daha fazla dolgu onu daha da büyütür.

Saydam veya özel bir arka plan kullanabilir miyim?

Özel bir renk kullanabilirsiniz ancak saydam arka plan kullanamazsınız. 9 düz renkten veya 4 gradyandan birini seçin ya da herhangi bir düz ton için renk seçiciyi açın. Seçici gradyan oluşturamaz ve saydam seçeneği yoktur, bu yüzden pencerenin çevresindeki alan her zaman bir renge sahiptir.

Pencere stilleri nasıl görünür?

macOS kırmızı, sarı ve yeşil noktalar çizer. Windows sekme başlığını sola, simge durumuna küçültme, ekranı kaplama ve kapatma işaretlerini sağa yerleştirir. Tarayıcı geri ve ileri okları ile bir adres çubuğu ekler. Yok seçeneği arka plan üzerinde yalnızca kodu gösterir.

Kodun ekran görüntüsünü almak için VS Code eklentisine ihtiyacım var mı?

Hayır. Kodu VS Code'dan, PyCharm'dan veya başka bir düzenleyiciden kopyalayıp buraya yapıştırın. Düz bir ekran yakalama sekmeleri, kenar çubuklarını ve kendi renk ayarlarınızı da alır; bu araç ise yalnızca kod parçasını, seçtiğiniz tema ve çerçeveyle çizer.

Kodum neden doğru renklendirilmiyor?

Önce Dil menüsünü kontrol edin. Araç dili hiçbir zaman tahmin etmez; bu yüzden TypeScript olarak ayarlanmış Python kodu yanlış renkler alır. Kod parçanıza uyan dili seçin. Vurgulama başarısız olursa hata mesajı yerine kod tek renkli düz metin olarak görünür.

Kod yazı tipini değiştirebilir miyim?

Boyutu değiştirebilirsiniz ancak yazı tipini değiştiremezsiniz. Kaydırıcı 11 ile 20 px arasında çalışır. Kod, cihazınızın yerleşik eş aralıklı yazı tipini kullanır; bu nedenle aynı kod parçası Mac'te ve Windows'ta oluşturulduğunda biraz farklı görünebilir.

Kod ekran görüntüsü aracı ücretsiz mi ve kodum bir yere gönderiliyor mu?

Evet, ücretsizdir; hesap, filigran ve günlük sınır yoktur. Kodunuz hiçbir zaman bir sunucuya gönderilmez; görsel cihazınızda çizilir ve kaydedilir. Canlı sitede Google Analytics sayfa ziyKetini kaydeder, kodunuzu değil.