Markdown Önizleme

Sol tarafta yazın, sağ tarafta HTML’in render edilişini izleyin. Önizleme, GitHub tarzı Markdown’ı destekler: tablolar, görev listeleri, sözdizimi vurgulu çitli kod blokları, üstü çizili metin, otomatik bağlanan URL’ler ve satır içi HTML. Commit’ten önce bir README hazırlamak, bir yorumun PR’de nasıl görüneceğini kontrol etmek ya da her tuş vuruşunun render edilişini izleyerek Markdown sözdizimini öğrenmek için kullanışlıdır.

Önizleme nasıl kullanılır

  1. 1

    Markdown yazın

    Sol bölme ham Markdown alır. Her değişiklik sağ bölmeyi anında yeniden render eder.

  2. 2

    HTML önizlemesini görün

    Sağ bölme, GitHub gibi biçimlendirilmiş render çıktısını gösterir.

  3. 3

    Modu değiştirin

    Dikkat dağıtmadan yazmak için yan yana görünüm, yalnızca önizleme veya yalnızca kaynak.

  4. 4

    HTML'yi kopyalayın

    Bir e-posta istemcisine veya CMS'ye yapıştırmanız gerekiyorsa render edilmiş HTML'yi alın.

Bu önizlemenin desteklediği özellikler

  • CommonMark: başlıklar, paragraflar, vurgu, listeler, blok alıntılar, kod blokları, bağlantılar, resimler, yatay çizgiler.
  • GFM uzantıları: sütun hizalamalı tablolar, görev listeleri (- [ ] ve - [x]), ~~ ile üstü çizili metin, otomatik bağlanan URL’ler ve dil ipucu içeren çitli kod blokları.
  • Sözdizimi vurgusu: highlight.js ile 100’den fazla dil, JavaScript, Python, Go, Rust, SQL, YAML vb.
  • Ham HTML: satır içi HTML olduğu gibi geçirilir (güvenlik için temizlenir).
  • Matematik (isteğe bağlı): matematik uzantısını etkinleştirirseniz $...$ satır içi ve $$...$$ blok olarak render edilir.

Desteklenmeyenler

  • Obsidian tarzı özel wiki bağlantıları ([[Page]]), bunlar yalnızca Obsidian’a özgüdür.
  • Pandoc’un çitli div’leri (:::), yalnızca Pandoc için.
  • Sunucu tarafı içeriştirmeler (server-side includes) veya {% ... %} şablon etiketleri.

Tipik kullanımlar

  • README hazırlama: IDE dışında yazıp son sürümü yapıştırın.
  • PR yorum biçimini kontrol etme: yayınlamadan önce, GitHub’ın yorum kutusu kod bloklarını doğru önizlemez.
  • Notları HTML’ye dönüştürme: biçimlendirilmiş içeriği bir e-postaya veya ham HTML kabul eden bir CMS’ye yapıştırmanız gerektiğinde.
  • Markdown öğretme: yan yana görünüm sözdizimini apaçık ortaya koyar.

Performans

Render işlemi, GFM eklentili bir Markdown-it ayrıştırıcısı kullanır ve tamamen tarayıcıda çalışır. Birkaç yüz KB’lik belgeler milisaniyeler içinde render edilir; çok büyük olanlar (tek dosyada koca bir kitap) siz yazarken takılabilir, böyle bir durumda bunları bölümlere ayırın.

Dışa aktarma

  • HTML’yi kopyala, render edilmiş içeriği ve biçim sınıflarını içeren <div>’i verir.
  • .md indir, kaynağı kaydeder.
  • Tarayıcınızın yazdırma penceresinden PDF’e yazdır, render edilmiş görünümün biçimlendirilmiş bir PDF kopyasını üretir.

Sık Sorulan Sorular

GitHub, GFM’nin üzerine kendi CSS’ini uygular. HTML çıktısı eşleşmelidir; biçimlendirme (yazı tipleri, boşluklar) onlara aittir. Tam eşitlik için “GitHub’ta render edildi” tema anahtarını kullanın.

Evet, matematik uzantısını etkinleştirirseniz, satır içi $...$ ve blok $$...$$ KaTeX ile render edilir. Sayfayı hafif tutmak için varsayılan olarak kapalıdır.

Temizlenir, <div>, <span>, <table>, <img> gibi güvenli etiketler geçer; <script> ve satır içi olay işleyicileri kaldırılır.

Yüzlerce KB sorunsuz çalışır. Çok büyük dosyalar için canlı render’ı kapatıp istek üzerine render edin.

Render tamamen istemci tarafında yapılır. İçerik hiçbir yere gönderilmez. Sayfayı yenilerseniz, tarayıcı form durumunu korumadıkça taslaklar kaybolur.

İlgili Araçlar

Araç diğer dillerde mevcuttur