HTML’yi temiz Markdown’a dönüştürün

HTML Markdown’a nasıl dönüştürülür

1. HTML’nizi ekleyin. İşaretlemeyi kutuya yapıştırın, yerel bir .html dosyası açın ya da herhangi bir web sayfasının bir bölümünü kopyalayıp yapıştırın: zengin yapıştırma açıkken dönüştürücü düz metin yerine panodaki biçimlendirilmiş HTML’yi alır.
2. Bağlantılar göreliyse temel URL girin. Bir sayfa kaynağından kopyalanan işaretlemede çoğu zaman /docs/setup gibi bağlantılar bulunur. Sayfa adresini girin; her göreli bağlantı ve görsel mutlak hâle gelir.
3. Markdown stilinizi seçin. Varsayılanlar (ATX başlıklar, tire madde işaretleri, çitli kod, satır içi bağlantılar, GFM açık) GitHub, GitLab, Obsidian, çoğu statik site oluşturucu ve yapay zekâ araçları için uygundur.
4. Kopyalayın veya indirin. Sonuç yazdıkça güncellenir. Panoya kopyalayın ya da ilk başlığın adını taşıyan bir .md dosyası olarak kaydedin.

Neyin nasıl dönüştüğü, öğe öğe

Markdown’ın sözcük dağarcığı HTML’den çok daha küçüktür; bu yüzden bir dönüştürücünün asıl işi her öğenin neye dönüşeceğine karar vermektir. Araç şunları üretir:

• Başlıklar <h1>–<h6>, # ile ###### arası olur. Setext stili yalnızca H1 ve H2’nin altını çizer, çünkü sözdizimi bu kadarını destekler; H3 ve altı yine # kullanır.
• Kalın ve italik (<strong>, <b>, <em>, <i>) seçtiğiniz sınırlayıcıları kullanır.
• Bağlantılar [metin](url "başlık") olur; başvurulu bağlantıları seçerseniz belgenin sonunda toplanan numaralı başvurulara dönüşür. Betik çalıştıran (javascript:) ya da data: yükü taşıyan bağlantılar yalnızca metinlerine indirgenir.
• Görseller ![alt](src) olur. Gerçek adresi data-src içinde tutan tembel yüklemeli görseller de yakalanır. Satır içi data: görselleri atılır, çünkü bir base64 yığını Markdown dosyasını okunmaz hâle getirir.
• Listeler, birkaç düzey iç içe olanlar dahil, üst öğenin altında girintilenir. Sıralı listeler start numarasını korur; 4’ten başlayan bir liste yine 4’ten başlar.
• Alıntı blokları, iç içe alıntılar dahil, > satırlarına dönüşür.
• Kod: satır içi <code> ters tırnak olur; <pre> blokları, bir dil belirtilmişse o dille çitli bloklara dönüşür (aşağıya bakın).
• Tablolar GFM boru tablolarına dönüşür. Ayrıntılar ve sınırlar sonraki bölümdedir.
• Üstü çizili ve görev listeleri: <del>, <s> ve <strike> ~~metin~~ olur; onay kutusuyla başlayan liste öğeleri - [ ] veya - [x] olur.
• Tamamen kaldırılanlar: <script>, <style>, <noscript>, <template>, iframe’ler, gömülü nesneler, SVG ve canvas. <div> ve <span> gibi yerleşim sarmalayıcıları açılır ve yalnızca metinleri tutulur; Markdown’ı geldiği HTML’den küçük ve okunaklı yapan tam olarak budur.

Tablolar: Markdown neyi taşıyabilir, neyi taşıyamaz

GitHub Flavored Markdown belirtimi (İngilizce) bir tabloyu başlık satırı, tireli bir ayırıcı satır ve gövde satırları olarak tanımlar. Belirtimdeki üç kural, HTML tablolarının nasıl dönüştüğünü belirler:

• Başlık satırı zorunludur. Birçok HTML tablosunun, özellikle elektronik tablolardan ya da eski CMS sayfalarından yapıştırılanların hiç <th> hücresi yoktur. Olduğu gibi bırakılırsa boru tablosuna dönüşemezler; bu yüzden dönüştürücü varsayılan olarak ilk satırı başlık yapar. O tabloları HTML olarak tutmayı tercih ediyorsanız seçeneğin işaretini kaldırın.
• Hücre içinde blok içerik olamaz. Belirtim, blok düzeyindeki öğelerin bir tabloya eklenemeyeceğini söyler; bu yüzden hücre içindeki paragraflar ve satır sonları tek satıra düzleştirilir. Hücrelerdeki listeler yapısını yitirir; bir tablo zengin içerik taşıyorsa onu HTML olarak tutmayı düşünün.
• Düz boru karakteri kaçırılmalıdır. Hücre içindeki bir | yeni bir sütun başlatırdı; bu yüzden dönüştürücü onu, belirtimin hücrenin her yerinde (kod aralıkları dahil) izin verdiği \| olarak yazar.

Birleştirilmiş hücreler kısmen desteklenir: colspan="3" olan bir hücrenin ardından sütunlar hizalı kalsın diye iki boş hücre gelir. Satır birleştirmenin Markdown’da karşılığı yoktur ve yeniden üretilmez. Bir <caption> tablonun üstüne kendi paragrafı olarak taşınır ve align özniteliklerinden gelen sütun hizalaması ayırıcı satırda :--, :-: veya --: olur.

Kod blokları ve sözdizimi vurgulama

Çitli kod blokları, açılış çitinden sonra ```python gibi bir bilgi dizesi taşıyabilir; oluşturucular kodu renklendirmek için bunu kullanır. Dönüştürücü dili vurgulayıcıların koyduğu yerlerde arar: language-* ve lang-* sınıfları (Prism, highlight.js ve çoğu Markdown oluşturucu), GitHub’ın highlight-source-* sarmalayıcısı ve data-lang ya da data-language öznitelikleri. İçinde <code> öğesi bulunmayan bir <pre> da kaçırılmış düzyazı olarak değil, kod bloğu olarak işlenir.

Kod metni olduğu gibi alınır; böylece vurgulayıcı işaretlemesi (o renkli <span> öğelerinin hepsi) koda dokunmadan kaybolur. Kodun kendisi üç ters tırnaklık bir dizi içeriyorsa, çit o diziden uzun yapılır; çünkü belirtim kapanış çitinin açılıştan en az o kadar uzun olmasını ister. Bu, Markdown hakkındaki Markdown belgelerinin bozulmamasını sağlar.

Seçenekler açıklandı

ATX mi setext mi başlıklar

ATX başlıkları (# Başlık) altı düzeyin hepsinde çalışır ve hemen her aracın beklediği biçimdir. Setext başlıkları metnin altını === veya --- ile çizer; bazı stil kılavuzları H1 ve H2 için bunu tercih eder, ama H3 ve altını ifade edemezler.

Satır içi mi başvurulu mu bağlantılar

Satır içi bağlantılar her URL’yi metninin yanında tutar; kısa belgelere ve yapay zekâ istemlerine uygundur. Başvurulu bağlantılar URL’leri en alttaki numaralı bir listeye taşır; bu, uzun paragrafları düz metin düzenleyicide okunur tutar ve belge depolarında yaygındır.

Markdown karakterlerini kaçırma

2024. Güzel bir yıl ya da dosya_adi_burada gibi metinler liste ya da italik sanılırdı; bu yüzden dönüştürücü o karakterleri ters eğik çizgiyle kaçırır. Görüntülenecek her şey için bu doğrudur. Çıktı bir yapay zekâ modeliyle sohbete, bir arama dizinine ya da düz metin bir nota gidecekse, daha temiz metin için kaçırmanın işaretini kaldırın.

Temel URL

Göreli URL’ler yalnızca geldikleri sayfada anlam taşır. Temel URL ayarlandığında, https://example.com/blog/post sayfasındaki ../images/chart.png, tarayıcıların kullandığı kurallarla çözülerek https://example.com/images/chart.png olur.

Bir web sayfasının tamamını dönüştürmek

Bu dönüştürücü URL getirmez. Tarayıcınızdaki bir sayfa, o site izin vermedikçe başka bir sitenin HTML’sini okuyamaz ve birçok modern sayfa içeriğini yüklendikten sonra JavaScript ile oluşturur; bu yüzden sunucu tarafı bir istek çoğu zaman boş bir kabuk döndürür. Görüntülenen sayfadan kopyalamak iki sorunu da aşar: makaleyi seçin, kopyalayın, buraya yapıştırın. Gerçekten gördüğünüz metni, bağlantıları ve biçimlendirmesiyle alırsınız; seçmediğiniz gezinti, çerez bannerları ve reklamlar gelmez. Bunun yerine bir sayfadaki tüm bağlantıları çıkarmak için link çıkarıcıyı kullanın.

Sık görülen sorunlar ve çözümleri

• Bir tablo çıktıda HTML olarak görünüyor. GFM kapalıdır ya da başlık yükseltme kapalıdır ve tablonun başlık satırı yoktur. Seçeneklerden birini yeniden açın.
• Bağlantılar yanlış yere gidiyor. Göreliydiler. Sayfa adresini temel URL olarak ekleyin.
• Satır sonları tuhaf görünüyor. Bir <br>, CommonMark’ın sert satır sonu olan iki sondaki boşluk ve bir yeni satıra dönüşür. Bazı düzenleyiciler kaydederken sondaki boşlukları kırpar; bu da onu yumuşak bir satır sonuna geri çevirir.
• Metin eksik. HTML, JavaScript ağırlıklı bir sitenin “Sayfa kaynağını görüntüle” bölümünden geldiyse içerik işaretlemede hiç bulunmayabilir. Bunun yerine görüntülenen sayfadan kopyalayın.
• Her şey tek paragraf. Kaynak, paragraflar için <p> yerine <div> öğeleri kullanmış. Markdown yalnızca anlamsal öğeleri bilir; bu yüzden stilli div’lerden kurulu bir sayfa düz metin yığınlarına dönüşür.

HTML’yi neden Markdown’a çevirelim?

Markdown anlam taşıyanı (başlıklar, vurgu, bağlantılar, listeler, tablolar, alıntılar ve kod) tutar; yerleşim işaretlemesini ve satır içi stilleri bırakır. Bu da onu düzenlemeyi, sürüm kontrolünde gözden geçirmeyi, Obsidian gibi bir bilgi tabanına ya da bir belge sitesine taşımayı ya da bir yapay zekâ modeline bağlamını class öznitelikleriyle harcamadan vermeyi kolaylaştırır. Geliştiriciler CMS içeriğini statik bir siteye taşımak için, yazarlar taslakları düzenleyiciler arasında götürmek için, araştırmacılar kaynakların temiz kopyalarını tutmak için kullanır. Kaynakları dönüştürmek yerine topluyorsanız Marqly araştırma bağlantılarını aranabilir tek bir kütüphanede düzenleyebilir (İngilizce); geliştirici iş akışı sayfası (İngilizce) kaydedilen belgelerin ve kod parçacıklarının nasıl bulunabilir kaldığını gösterir.

Tasarımdan gelen gizlilik

Dönüştürücü, açık kaynaklı Turndown kütüphanesi ve GitHub tarzı Markdown eklentisi ile bu sayfanın kendi tablo, kod ve bağlantı işleyişinden oluşur; hepsi sayfaya gömülüdür. Yüklendikten sonra çevrimdışı çalışır ve yapıştırdığınız metin, dosyalar ve ayarlar cihazınızda kalır. Dönüştürmeden önce veya sonra hızlı bir boyut kontrolü için okuma süresi hesaplayıcı da kelime ve karakterleri yerelde sayar.