Markdown ↔ HTML Dönüştürücü

Markdown ve HTML, neredeyse her metin tabanlı ürünün arasında oynadığı iki formattır. Markdown insanların yazdığıdır — README'ler, blog yazıları, GitHub yorumları, Slack mesajları, dokümantasyon, uygulama içi notlar — çünkü hızlı yazılır, ham haliyle okunabilir görünür ve birkaç kuralı öğrendikten sonra kas hafızası ödüllendirir. HTML tarayıcıların, e-posta istemcilerinin ve render motorlarının asıl tükettiğidir; Markdown belgesinin görüntülemeden önce derlendiği kanonik formdur. Bu dönüşüm günde yüz milyonlarca kez gerçekleşir, çoğunlukla görünmez şekilde, ve sürtüşme yalnızca bir şey ters gittiğinde fark edilir.

Bu dönüştürücü o iki yönü tek arayüzde yönetir. Markdown'ı sola yapıştırın, HTML'i sağda alın, tam tersi de geçerli. Markdown tarafı CommonMark (standartlaştırılmış varyant) artı GitHub Flavored Markdown uzantılarını anlar: tablolar, görev listeleri ([ ] ve [x] kutucuklarıyla), dil etiketli kod blokları, otolinklenmiş URL'ler, ~~üzeri çizili~~, ve dipnotlar. HTML tarafı GitHub'ın yorum render motorunun temelindeki toleranslı parser'ı kullanır: kapatılmamış tag, eşleşmeyen tırnak, garip boşluk gibi gerçek dünyada karşılaşılan eksik biçimli HTML'i affedici işler.

Markdown-to-HTML yönü daha basit ve çoğu kullanıcının istediği. Başlıklar (# H1) <h1> olur. Boş satırla ayrılmış paragraflar <p>. Kalın (**) <strong>, italik (*) <em>. Linkler <a> tag, kod (`) <code>, üç-tırnaklı (```language) <pre><code class="language-...">. Listeler <ul>/<ol>, alıntı <blockquote>. Dönüşümler determinististir, çıktı HTML5 standardındadır. Kod blokları çoğu syntax highlighter (Prism, highlight.js) ile uyumlu sınıf adı taşır; renklendirme render katmanında gerçekleşir.

GFM tabloları Markdown'ı dokümantasyon için gerçekten kullanışlı yapan özelliktir. Pipe-tire sözdizimi <table>, <thead>, <tbody> ve hizalanmış kolonlar üretir. Header satırı olan tablolar ekran okuyucuların iyi yorumladığı semantik markup üretir. Birleştirilmiş hücreler GFM spec'inde yoktur — onlara ihtiyaç duyuyorsanız Markdown'dan büyümüşsünüz demektir, HTML elle yazılmalı.

Görev listeleri ürün işi için ergonomik kılan ikinci uzantıdır. `- [ ] yapılmadı` ve `- [x] yapıldı` <li> içine yerleştirilmiş <input type="checkbox"> üretir. Çıktı checkbox'ları varsayılanda devre dışıdır (interaktif değil); GitHub yorumlarında render edildiği gibi görünürler. Wiki veya not uygulaması için interaktif istiyorsanız output'tan disabled attribute'unu çıkarabilirsiniz.

Sanitize edilmesi güvenilmeyen kullanıcı içeriği için önemlidir. Düz Markdown ham HTML'e izin verir — Markdown kaynağındaki `<script>alert(1)</script>` gerçek <script> tag'i üretir; render edilmiş çıktı başka kullanıcılara gösteriliyorsa XSS açığıdır. Sanitize toggle'ı tehlikeli tag ve attribute'ları siler (<script>, on* event handler, javascript: URL'ler). Birinci taraf içerik için kapalı bırakılabilir; kullanıcı üretimi içerik için açılmalı.

HTML-to-Markdown yönü daha zorludur çünkü HTML üst kümedir — bazı HTML yapıları temiz Markdown karşılığı yoktur. Araç dengeli mod kullanır: Markdown karşılığı yoksa güvenli HTML'i inline koru (örn. <details><summary>); varsa yaklaştır (<span style='font-weight:bold'> bold olur). Inline stiller atılır çünkü Markdown yapısaldır, sunum değil.

Akıllı tırnaklar yazarları yakalayan bir ayardır. Markdown kaynak dosyaları genellikle düz tırnak (" ve ') kullanır çünkü klavyelerde o vardır, ama render edilmiş HTML genellikle tipografik doğruluk için kıvrık tırnak (“ ”) ister. Akıllı tırnak toggle'ı düzü kıvrığa çevirir. Teknik yazımda (kod parçacıkları) kapalı bırakın; nesir yazımı için açın.

Gizlilik aynı modeldir: yükleme yok, log yok, tamamen tarayıcıda çalışır. Dönüşümü güçlendiren kütüphaneler (marked, turndown) sayfayla beraber paketlenmiştir; uzak API çağrısı yapılmaz. İçerik hassasken — yayınlanmamış makale taslakları, dahili dokümantasyon — bu önemlidir.

Bu araç Omnvert'in yazma utiliti'leriyle eşleşir. Word Counter her iki yönün dilbilimsel şeklini gösterir, JSON Viewer Markdown belgelerinin yanındaki yapısal veriyi yönetir, HTML Formatter HTML tarafının CMS'e yapıştırmadan önce temizlenmesi gereken durumlarda faydalıdır.