HTML'den Markdown'a Dönüştürücü — HTML'yi Çevrimiçi Markdown'a Dönüştürün _

HTML'den Markdown'a dönüşüm nedir?

HTML, tarayıcının görüntülediği render edilmiş biçimcidir — <h1>, <ul>, <table>, <a> ve geri kalanı. Markdown, aynı yapıyı 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'i Markdown'a dönüştürmek, render edilmiş veya dışa aktarılmış HTML'yi düzenlenebilir düz metin Markdown'a geri getirir — bir CMS'ten içerik göçü veya README temizliği için tam ihtiyaç duyulan şey.

Çıktı hangi GitHub Flavored Markdown özelliklerini destekler?

turndown-plugin-gfm uzantısıyla birlikte paketlenmiş turndown@7.2.0 motoru, HTML'nizden tam GFM üstkümesini yayar: <h1>–<h6>'dan ATX tarzı başlıklar #'tan ######'a, iç içe geçmiş sıralı ve sırasız listeler, kalın **text** ve italik *text*, <del>'den üstü çizili ~~text~~, satır içi bağlantılar [text](url) ve görseller ![alt](src), dil ipuçlarıyla çitli kod blokları (```js), satır içi kod parçacıkları `code`, <table>'dan pipe-tablolar, checkbox inputlardan GFM görev listeleri - [ ] / - [x], alıntılar > ve yatay çizgiler ---. Önizleme paneli, dönüşümü görsel olarak doğrulayabilmeniz için yayılan Markdown'ı marked@12.0.2 ile yeniden render eder.

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

Her dönüşüm, paketlenmiş üç 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. Temizleme: yapıştırılan HTML, işaretlemeyi gezmeden önce <script> öğelerini, tüm on* olay işleyicilerini ve javascript: URI'larını kaldırmak için önce DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })'dan geçirilir. DOMPurify, Mozilla MDN, Atlassian ve Microsoft 365'in kullandığı aynı XSS temizleyicisidir.
2. Dönüştürme: turndownService.turndown temizlenmiş DOM'u gezer ve GitHub Flavored Markdown yayar — başlıklar # öneklerine, listeler - / 1. öğelerine, <table> pipe-tabloya dönüşür. Markdown, salt okunur <textarea>'ya value aracılığıyla yazılır (asla innerHTML değil), bu nedenle doğası gereği güvenlidir.
3. Render: yayılan Markdown marked.parse tarafından yeniden ayrıştırılır, DOMPurify aracılığıyla tekrar temizlenir ve Markdown'ın beklenen yapıya geri dönüştüğüne dair görsel bir onay alabilmeniz için önizleme panelinin innerHTML'ına atanır. Canlı mod, girdiyi 150 ms debounce eder; böylece yapıştırırken çıktı ayrıştırıcıyı zorlamadan güncellenir.

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

• Gizlilik: her temizleme, dönüştürme ve render geçişi tarayıcınızda gerçekleşir. HTML — dışa aktarılan CMS gönderileri, iç dokümantasyon ve gizli sayfa kaynak kodu dahil — sunucularımıza asla ulaşmaz.
• Varsayılan olarak XSS-güvenli: yapıştırılan HTML, turndown gezmeden önce DOMPurify'dan geçirilir ve önizleme paneli yeniden render edilen HTML'yi innerHTML'dan önce tekrar DOMPurify'dan geçirir; dolayısıyla <script> etiketleri veya onerror= işleyicileri içeren işaretleme yapıştırmak edilgen bir önizleme ve temiz Markdown üretir.
• GFM-tam: <table> öğeleri Markdown pipe-tablolarına, <del> üstü çiziliye, checkbox listeleri GFM görev listelerine dönüşür. Çoğu çevrimiçi dönüştürücü HTML → Markdown yolunda tabloları düşürür — paketlenmiş turndown-plugin-gfm uzantısı onları korur.

HTML'den Markdown'a dönüşümün yaygın uygulamaları nelerdir?

HTML'i Markdown'a dönüştürmek, içerik göçü, dokümantasyon ve arşivlemede karşımıza çıkar:

• CMS göçü: bir WordPress veya Ghost gönderisini HTML olarak dışa aktarıp Hugo / Jekyll / 11ty / Astro statik site yeniden inşası için Markdown'a dönüştürmek. Dönüşüm, başlık seviyelerini, bağlantıları, listeleri ve satır içi vurgulamayı korur.
• README temizliği: bir wiki sayfasının veya web makalesinin render edilmiş HTML'ini yapıştırıp bir proje README'si veya dokümantasyon sitesi için düzenlenebilir Markdown'a geri çekmek, yapıyı elle yeniden yazmak yerine.
• Arşivleme ve notlar: bir HTML e-postasını veya web klibi yakalamak ve Obsidian, Notion veya düz metin bilgi tabanında saklamak için Markdown'a dönüştürmek — Markdown diff dostu kalmaya devam eder ve format değişikliklerinden sağlam çıkar.

Bir HTML'den Markdown'a örneği nasıl görünür?

<h2>Başlık</h2><ul><li>a</li><li>b<ul><li>iç içe</li></ul></li></ul> yapıştırmak ## Başlık, iç içe madde imli liste ve aynı iç içe yapıya yeniden render edilen önizleme paneli içeren Markdown üretir. Bir üst bilgi satırı ve iki veri satırıyla <table> yapıştırmak ise eşdeğer | sütun | sütun | pipe-tablosunu üretir — dönüşümün başlıkları, listeleri ve tabloları koruduğunu doğrular.

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

Evet. Her temizleme, dönüştürme ve render geçişi tarayıcı sekmenizde JavaScript olarak yerel olarak çalışır. Üç paketlenmiş kütüphane — turndown@7.2.0 (turndown-plugin-gfm@1.0.2 ile), 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. Dışa aktarılan gönderiler, iç dokümanlar ve gizli sayfa kaynak kodu cihazınızda kalır.

Render edilen önizleme paneli XSS güvenli mi?

Evet. Yapıştırılan HTML, turndown gezmeden önce DOMPurify.sanitize'dan geçirilir; önizlemenin innerHTML'ına atanan her HTML dizgisi de 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 kullandığı aynı kütüphanedir. Varsayılan html profili <script> öğelerini, her on* olay işleyici özniteliğini (onerror, onclick vb.) ve javascript: URI şemalarını 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ı HTML'den dönüştürülüyor mu?

Evet. HTML → Markdown yönü turndown-plugin-gfm'i kullanır; bu, <table> düğümlerini gezen ve denk pipe-tablo Markdown'ı üreten özel bir turndown kuralı ekler — bir başlık satırı, |---|---| hizalama satırı ve ardından veri satırları. Çoğu çevrimiçi dönüştürücü bu yolda tabloları düşürür; bu araç korur. Üstü çizili (<del>text</del> → ~~text~~) ve görev listeleri (<input type="checkbox"> → - [ ] / - [x]) aynı şekilde dönüşür.

HTML'im doğru şekilde dönüştürülecek mi?

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 — dönüşüm temiz ve öngörülebilirdir. Sınır durumlar: HTML yorumları (<!-- ... -->) kaldırılır (Markdown'un yorum sözdizimi yoktur); satır içi stil ve class öznitelikleri Markdown'da karşılığı olmadığı için atılır; ve <sub> / <sup> gibi alışılmadık satır içi etiketler düz metne dönüştürülür. Bunlar belgelenmiş turndown davranışlarıdır, hata değildir.

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

v1'de değil. Çitli kod blokları önizlemede 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 HTML'den Markdown'a Dönüştürücü, aynı kökenden paketlenmiş turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2 ve DOMPurify@3.1.7 ile birlikte gelir; tam GFM özellik kümesini yayar ve 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.