---
title: "Kod Görseli Üretici"
description: "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."
url: https://sade.dev/tr/tools/code-image/
lang: tr
author: "Muhammet Şafak"
published: 2026-09-23
updated: 2026-09-23
section: Tool
tags: ["kod","görsel","paylaşım","canvas"]
---

# 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.

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.