Kod Görseli Üretici

Kod bloğunu paylaşılabilir bir PNG’ye çevirir. Kodun kendisi tarayıcıdan hiç çıkmaz; tema, ölçek ve pencere çerçevesi seçilebilir.

Bu araç tarayıcınızda çalışır. Veriler dışarı çıkmaz.

Önizleme

Kod girdiğinizde önizleme burada görünecek.

Nasıl Çalışır

Bir kod parçasını, sosyal medyada ya da bir sunumda paylaşılabilecek renklendirilmiş bir PNG’ye çevirir. Sözdizimi renklendirme sayfada elle yazılmış bir tokenizer ile yapılır, görsel de Canvas 2D API ile doğrudan tarayıcıda çizilir — kodun kendisi hiçbir zaman sayfadan çıkmaz.

Desteklenen diller

JavaScript, TypeScript, JSON, Python, Go, PHP, SQL ve bash — bu sekiz dil için düzenli ifade tabanlı bir tokenizer, anahtar kelimeleri, string’leri, sayıları, yorumları ve fonksiyon çağrılarını ayrıştırıp renklendirir. Bu, sitenin kendi kod bloklarında kullandığı Shiki’nin tam kapsamlı, gramer tabanlı vurgulaması değildir; daha dar bir sözcüksel yaklaşımdır ve nadiren bir token’ı yanlış sınıflandırabilir. Dil otomatik tespit edilir, ama listeden elle de seçilebilir.

Görünüm seçenekleri

  • Tema — Shiki’nin vitesse-light ve vitesse-dark paletlerinden türetilmiş açık ve koyu tema.
  • Ölçek — 1x, 2x ya da 3x; çıktının piksel boyutu seçilen katsayıyla büyütülür, retina ekranlarda net görünür.
  • Dolgu ve pencere çerçevesi — üç noktalı bir başlık çubuğu ve dil etiketiyle, ya da çıplak kod bloğu olarak.

Türkçe karakterler (ş ğ İ ı ö ü ç) dahil, önizleme her değişiklikte güncel metinle yeniden çizilir; bu da karakterlerin yedek bir fonta düşmeden doğru render olmasını sağlar.

Çıktı

“PNG indir” dosyayı code-image.png adıyla indirir. Tarayıcı destekliyorsa “Panoya kopyala” görseli doğrudan panoya yazar; desteklemiyorsa bu düğme hiç görünmez.

Gizlilik

Bu araç tamamen tarayıcıda çalışır, ağ isteği atmaz. Yazdığın kod hiçbir sunucuya gönderilmez; render, tokenizer’dan çıktı fontuna kadar sayfanın kendi belleğinde kalır.

Ara

Yazmaya başlayın. Notlar, sistem yazıları, günlük, araçlar ve sayfalar.

↑↓gez↵açesckapat