Markdown'dan HTML'ye Dönüştürücü — Markdown'u HTML'ye Çevrimiçi Dönüştürme _

Markdown'dan HTML'ye dönüşüm nedir?

Markdown, yapılandırılmış nesir kodlamak için minimum noktalama (başlıklar için #, vurgu için *, liste öğeleri için -) kullanan hafif düz metin formatıdır. GitHub Flavored Markdown (GFM) orijinal CommonMark spesifikasyonunu tablolar, üstü çizili, görev listeleri ve otomatik bağlantılarla genişletir. HTML ise tarayıcının görüntülediği render edilmiş biçimdir. Markdown'u HTML'ye dönüştürmek, hafif sözdiziminde yazıp render edilmiş bir yüzeye — README, statik site sayfası, e-posta gövdesi — etiketleri elle yazmadan yayın yapmanıza olanak verir.

Hangi GitHub Flavored Markdown özellikleri destekleniyor?

Paketlenmiş marked@12.0.2 ayrıştırıcısı GFM'in tam üstkümesini destekler: ATX tarzı başlıklar #'tan ######'a kadar, iç içe geçmiş sıralı ve sırasız listeler, kalın **text** ve italik *text*, üstü çizili ~~text~~, satır içi bağlantılar [text](url) ve satır içi görseller ![alt](src), opsiyonel dil etiketli çitli kod blokları (```js), satır içi kod parçacıkları `code`, başlık satırı içeren pipe-tablolar, GFM görev listeleri - [ ] / - [x], alıntılar >, yatay çizgiler --- ve otomatik bağlantılar. Her öğe GitHub'ın renderladığı şekilde önizleme panelinde gösterilir.

Markdown'dan HTML'ye dönüşüm nasıl çalışır?

Her dönüşüm, paketlenmiş iki kütüphane kullanılarak tarayıcınızda yerel olarak çalışır — CDN yok, fetch yok, telemetri yok. Üst düzey adımlar şunlardır:

1. Ayrıştırma: marked.parse(source) Markdown'unuzu okur ve bir HTML dizesi üretir. Parser GFM modunda çalışır; tablolar, görev listeleri, üstü çiziliyazı ve otomatik bağlantılar tanınır.
2. Temizleme: HTML çıktısı innerHTML'a atanmadan önce DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })'dan geçirilir. DOMPurify, Mozilla MDN, Atlassian ve Microsoft 365'in kullandığı aynı XSS temizleyicisidir — HTML'i ayrıştırır, DOM'u gezer ve <script> öğelerini, her on* olay işleyici özniteliğini ve javascript: URI şemalarını kaldırır.
3. Render: temizlenmiş HTML, innerHTML aracılığıyla önizleme paneline yazılır; ham HTML ise ikinci panelde salt okunur bir <textarea> üzerinden görüntülenerek kopyalanabilir. Canlı mod, girdiyi 150 ms debounce eder; böylece önizleme yazarken ayrıştırıcıyı zorlamadan güncellenir.

Markdown'u bu araçla HTML'ye neden dönüştürmelisiniz?

• Gizlilik: her ayrıştırma, temizleme ve render geçişi tarayıcınızda gerçekleşir. Markdown — yayımlanmamış blog gönderileri, iç dokümantasyon taslakları ve gizli README içerikleri dahil — sunucularımıza asla ulaşmaz.
• Varsayılan olarak XSS-güvenli: render edilen önizleme paneli her HTML dizesini innerHTML'dan önce DOMPurify'dan geçirir; dolayısıyla Markdown'unuzdaki ham HTML içindeki <script> etiketi veya onerror= işleyicisi edilgen bir önizleme verir. Ham sekme, temizlenmemiş çıktıyı inceleme için gösterir; ancak value üzerinden bir <textarea> içinde durur — asla yürütülmez.
• GFM-tam: tablolar, üstü çizili, görev listeleri ve otomatik bağlantılar GitHub'ın renderladığı şekilde görüntülenir. Bir Markdown pipe-tablosu, <thead> ve <tbody> ile birlikte HTML <table>'ına dönüşür — kayıp satır yok, düzleştirilmiş yapı yok.

Markdown'dan HTML'ye dönüşümünün yaygın uygulamaları nelerdir?

Markdown'u HTML'ye dönüştürmek dokümantasyon, statik site çalışması ve e-posta yazımında karşımıza çıkar:

• GitHub README yazımı: bir proje README'sini yerel olarak Markdown ile taslaklayıp push'tan önce önizlemek. Önizleme; tablolar, görev listeleri ve çitli kod blokları için GitHub'ın GFM render'ı ile eşleşir.
• Statik site içeriği: bir Markdown post yapıştırıp markup bekleyen bir CMS alanı veya şablon motoru için HTML almak.
• E-posta şablonları: işlemsel bir e-posta gövdesini Markdown olarak yazıp e-posta sağlayıcısının şablon motoru için HTML'e dönüştürmek. Çıktı düz semantik HTML'dir — satır içi stil yok, içine sıkıştırılmış e-posta istemcisi tuhaflıkları yok.

Markdown'dan HTML'ye dönüşüm örneği nasıl görünür?

# Title\n\n- item 1\n- item 2\n\n[link](https://example.com)'u yapıştırmak, <h1>Title</h1> içeren bir önizleme paneli, iki öğeli bir sırasız liste ve bir <a href="https://example.com">link</a> üretir. Ham panel, tam HTML dizesini gösterir; böylece onu doğrudan bir şablona kopyalayabilirsiniz. |---|---| hizalama satırı içeren bir pipe-tablo, <thead> ve <tbody> ile tam bir <table>'a dönüşür — GFM tablolarının GitHub gibi renderladığını onaylar.

Bu Markdown'dan HTML'ye dönüştürücüsü tamamen tarayıcımda mı çalışır?

Evet. Her ayrıştırma, temizleme ve render geçişi tarayıcı sekmenizde JavaScript olarak yerel olarak çalışır. Paketlenmiş kütüphaneler — marked@12.0.2 ve DOMPurify@3.1.7 — sayfayla aynı kökenden gönderilir; CDN bağımlılığı yok, fetch yok, XMLHttpRequest yok, girdide navigator.sendBeacon yok. Araç ayrıca sayfa yüklendikten sonra çevrimdışı çalışır; çünkü tedarikçi kütüphaneleri yanına kopyalanmış statik bir HTML/CSS/JS paketidir. Yayımlanmamış gönderiler, iç dokümanlar ve gizli README'ler cihazınızda kalır.

Render edilen önizleme paneli XSS güvenli mi?

Evet. innerHTML'a atanan her HTML dizgisi önce DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })'dan geçer. DOMPurify; Cure53 tarafından sürdürülen açık kaynak XSS temizleyicisidir; Mozilla MDN, Atlassian ve Microsoft 365'in kullanıcı kaynaklı HTML'i sertleştirmek için kullandığı aynı kütüphanedir. Varsayılan html profili <script> öğelerini, her on* olay işleyici özniteliğini (onerror, onclick vb.), href / src içindeki javascript: URI şemalarını ve bilinen tehlikeli CSS ifadelerini kaldırır. <img src=x onerror=alert(1)> yapıştırmak document.querySelector('#output-preview img[onerror]')'in null döndürdüğü ve alert'in tetiklenmediği bir önizleme üretir.

GFM tabloları destekleniyor mu?

Evet. Markdown → HTML yönü pipe tabloları marked'ın GFM modu üzerinden yerel olarak işler — |---|---| hizalama satırıyla ayrılmış bir başlık satırı ve ardından veri satırları, <thead> + <tbody> içeren bir <table> üretir. Üstü çizili (~~text~~ → <del>text</del>) ve görev listeleri (- [ ] / - [x] → <input type="checkbox">) GitHub'ın renderladığı şekilde çalışır.

Markdown'ım doğru şekilde dönüştürülür mü?

Kanonik GFM özellik kümesi için — h1'den h6'ya başlıklar, iç içe sıralı ve sırasız listeler, kalın / italik / üstü çizili, satır içi bağlantılar, satır içi görseller, dil etiketli çitli kod blokları, satır içi kod parçacıkları, pipe tablolar, görev listeleri, alıntılar, yatay çizgiler ve otomatik bağlantılar — HTML çıktısı kararlı ve GitHub'ın renderer'ıyla eşleşir. Bilinmesi gereken bazı davranışlar: Markdown içindeki ham satır içi HTML (örn. <sub>text</sub>) çıktıya değişmeden geçer; CommonMark setext başlıkları (=== altçizgileri) ve ATX başlıkları (# Title) her ikisi de aynı <h1>'i üretir. Bunlar belgelenmiş marked davranışlarıdır, hata değildir. Ters yöne ihtiyaç duyarsanız HTML'den Markdown'a aracını kullanın.

Çitli kod bloklarında sözdizimi vurgulama destekleniyor mu?

v1'de değil. Çitli kod blokları tek aralıklı yazı tipi ve hafif bir arka planla render edilir ancak dil başına token vurgulaması yoktur. Sözdizimi vurgulama eklemek Prism veya highlight.js paketlemeyi gerektirir; her biri 15–40 KB ek getirir; ayrıca her dil için bir gramer dosyası ve Workshop Terminal paletine hizalanması gereken bir tema matrisi gerekir. Şimdilik render doğruluk ve XSS güvenliğine odaklanıyor; satır içi vurgulamaya kullanıcı talebi olursa, opsiyonel bir geçiş düğmesi uygulanabilir bir devamdır.

Bu Markdown'dan HTML'ye Dönüştürücü, aynı kökenden paketlenmiş marked@12.0.2 ve DOMPurify@3.1.7 ile birlikte gelir; tam GFM özellik kümesini destekler; her render edilen HTML dizgisini DOM'a değmeden temizler. Yükleme yok, CDN yok, telemetri yok — her bayt tarayıcınızda kalır.