Markdown Görüntüleyici
Markdown belgenizi README gibi önizleyin; tablolar ve görev listeleri dahil. Başlık yapısını çıkarır, ekran okuyucuyu bozan seviye atlamalarını bildirir.
Soldaki alana Markdown yapıştırın, önizleme burada görünür.
Belge tarayıcınızda işlenir, hiçbir sunucuya gönderilmez.
Özet (TL;DR)
- Bu görüntüleyici Markdown belgesini HTML metni olarak değil React bileşeni olarak işler; bu yüzden belgenizdeki ham HTML çalıştırılmaz, düz metin olarak gösterilir.
- Seviye atlayan bir başlık (H2 den doğrudan H4 e geçmek) ekranda kusursuz görünür ama ekran okuyucuya bozuk bir hiyerarşi olarak duyulur. Yapı görünümü bu atlamaları görünür kılar.
- Okuma süresi yalnızca düz metinden hesaplanır. Kod bloklarının içindekileri kelime saymak, kod ağırlıklı bir README de tahmini kullanılamaz hâle getirir.
- GitHub Flavored Markdown temel söz dizimine tablo, görev listesi ve üstü çizili metin ekler. Üçü de burada desteklenir, çünkü bunlar olmadan bir README önizlemesi gerçekçi olmaz.
Önizleme ile düzenleyici neden aynı şeyi göstermez
Markdown tek bir dil gibi görünür ama değildir. 2004 teki özgün söz dizimi pek çok şeyi belirsiz bıraktı, CommonMark yıllar sonra kuralları sıkılaştırdı, GitHub ise bunun üzerine kendi eklentilerini koydu. Dolayısıyla iki işleyici aynı anda doğru olup belgeniz hakkında farklı sonuç üretebilir. Düzenleyicide doğru görünen bir dosyanın depo sayfasında bozuk çıkmasının sebebi budur.
Farklar birkaç noktada toplanır: bir listenin üstündeki boş satırla ilişkisi, paragraf içindeki satır sonunun korunup korunmadığı ve ham HTML in başına ne geldiği. Çoğu zaman bunların hiçbiri önemli değildir. Önemli olduğunda ise tam yayımlama anında önem kazanır.
Ham HTML gösterilir, çalıştırılmaz
Markdown standardı ham HTML e izin verir ve GitHub bunun süzülmüş bir alt kümesini işler. Bu görüntüleyici hiçbirini işlemez: kaynağınızdaki HTML etiketleri düz metin olarak görünür.
Bu bir eksiklik değil, bilinçli bir güvenlik sınırıdır. Belge yapıştırmaya davet eden, sonra o belgeyi canlı biçimlendirmeye çeviren bir araç yansıtılmış betik açığıdır; alışılmış çözüm olan süzgeç ise sürekli değişen bir hedefe karşı sonsuza dek bakımı gereken bir izin listesi demektir. Hiçbir şey işlememek, sürekli bakım yükümlülüğü ve başarısızlık senaryosu olmayan tek seçenektir.
<div align="center"> <img src="logo.png" width="200"></div> Yukarıdaki blok burada metin olarak görünür, GitHub ta işlenir.Pratik sonucu şudur: logosunu div ile ortalayan bir README burada GitHub taki hâlinden farklı görünecektir. Araç HTML tespit ettiğinde bunu açıkça söyler, bir bloğun neden kaybolduğunu size bırakmaz.
Yapı görünümü ve yakalamak için var olduğu kusur
Yapı görünümü her başlığı seviyesi ve kaynak satırıyla listeler, derinliğine göre girintiler. Asıl işi tek bir kusuru görünür kılmaktır: seviye atlaması.
# Proje başlığı## Kurulum#### Gereksinimler <- H2 den H4 e atlıyorİşlendiğinde bu gayet düzgün görünür. H4 sadece H3 ten küçüktür ve gözle bir yanlışlık fark edilmez. Ancak yardımcı teknolojiler başlık seviyelerini yapı olarak duyurur; 2 den 4 e atlamak ekran okuyucu kullanan birine bir bölümün eksik olduğunu söyler. Otomatik içindekiler üreten her araç da bundan bozuk bir iç içelik çıkarır.
Bilgi
İstatistikler tam olarak neyi sayar
Kelime sayısı ve okuma süresi, çitli kod bloklarının içeriğini dışarıda bırakır. Kullanışlı bir tahmin ile anlamsız bir tahmin arasındaki fark budur: yarısı kurulum komutlarından oluşan bir README, aksi hâlde kimsenin düz metin gibi okumadığı satırların belirlediği bir okuma süresi bildirirdi.
| Değer | Neyi sayar |
|---|---|
| Kelime | Yalnızca düz metin. Kod blokları, satır içi kod ve liste işaretleri hariç |
| Karakter | Boşluklar ve biçimlendirme dahil kaynağın tamamı |
| Satır | Boş olmayan satırlar |
| Kod bloğu | Çitli bloklar; iç içe çitler tek blok sayılır |
| Okuma süresi | Dakikada 200 kelime, en az bir dakikaya yuvarlanır |
Çit içinde çit
Bir ayrıştırma ayrıntısı bilinmeye değer, çünkü basit araçları sürekli bozar. Çit üç veya daha fazla ters tırnaktır ve kapatan çit, açan çit kadar uzun olmak zorundadır. Markdown hakkında yazılmış bir belgenin, içinde kod bloğu gösteren bir kod bloğu barındırabilmesini sağlayan kural budur.
```````bu içteki çit bloğu bitirmez```````Karşılaştığı ilk üç ters tırnakta bloğu kapatan bir ayrıştırıcı, dosyanın geri kalanını düz metin sayar; bu da sonraki bütün sayımları kaydırır ve sıradan metni hayalet başlıklara çevirebilir. Bu görüntüleyici hem çit karakterini hem uzunluğunu takip eder.
Hiçbir şey tarayıcınızdan çıkmaz
Belge yerel olarak ayrıştırılır ve işlenir. Hiçbir şey yüklenmez; söz konusu dosya bir iç şartname veya henüz yayımlanmamış bir README olduğunda önemli olan da budur. Sayfa yüklendikten sonra bağlantınızı kesseniz bile araç çalışmaya devam eder.
Sıkça Sorulan Sorular
- HTML im neden işlenmiyor?
- Bilinçli bir tercih. Ziyaretçinin verdiği HTML i işlemek bir betik açığıdır ve alternatifi olan süzgeç kalıcı bir bakım yükümlülüğüdür. HTML metin olarak gösterilir ve araç bulduğunda size söyler. GitHub süzülmüş bir alt kümeyi işlediği için HTML e dayanan bir belge orada farklı görünecektir.
- GitHub Flavored Markdown destekleniyor mu?
- Evet. Tablolar, görev listeleri, üstü çizili metin ve otomatik bağlantılar çalışır. Gerçek bir README nin dayandığı eklentiler bunlardır; onlar olmadan bir önizleme size pek bir şey anlatmaz.
- Okuma süresi neden başka araçlardan düşük çıkıyor?
- Kod blokları kelime sayısının dışında tutulduğu için. Çoğu komut örneğinden oluşan bir belgede fark büyüktür ve bunları dışarıda bırakmak daha dürüst sonucu verir: kimse bir kabuk çıktısını düz metin hızında okumaz.
- Başlık seviyesi atlaması nedir, neden önemlidir?
- Kendinden önceki başlığa göre birden fazla seviye derin olan başlıktır; örneğin H2 nin hemen altında bir H4. Gözle bakıldığında bir sorun görünmez, sorun da tam olarak budur. Ekran okuyucular bunu belge yapısında bir boşluk olarak duyurur ve içindekiler üreten araçlar bundan yanlış bir iç içelik çıkarır.
- Doğrudan .md dosyası açabilir miyim?
- Dosyanın içeriğini kaynak alanına yapıştırın. Araç diskten dosya okumayı bilinçli olarak yapmaz; böylece her tarayıcıda aynı şekilde çalışır ve ihtiyacı olmayan bir izni istemek zorunda kalmaz.
Bu aracı ve yazıyı hazırlayan: Mustafa Kürşad Başer, Senior Software Engineer. Yayın: Ağustos 2026.