Softonic

Markdown'dan HTML'e Çevirici

Adım 1 / 3
Sonraki

Markdown’ı yapıştırın ve temiz, semantik HTML alın: <h1>’dan <h6>‘e, <ul>, <ol>, <table>, <pre><code> (vurgulanan sözdizimiyle), <blockquote> ve otomatik bağlantılanan URL’ler. Mevcut bir sayfaya mı entegre ediyorsunuz yoksa bağımsız bir dosya mı oluşturuyorsunuz; buna göre tam belgeyi (<html>, <head> ve minimum bir stil tablosu içeren) veya yalnızca ana metin içeriğini seçin.

Markdown'ı HTML'e nasıl dönüştürürsünüz?

  1. 1

    Markdown'ı Yapıştırın

    Tam belge veya parçası. YAML front-matter bölümü varsa otomatik olarak çıkarılır.

  2. 2

    Uzantı kümesini seçin

    Yalnızca CommonMark, GFM (tablolar, görev listeleri, otomatik bağlantılar) veya GFM + matematik.

  3. 3

    Çıkış modunu seçin

    Entegrasyon için bir parçacık ya da başlık ile minimal CSS içeren tam HTML belgesi.

  4. 4

    HTML'yi kopyalayın veya indirin

    HTML'yi metin olarak alın veya bir `.html` dosyası olarak kaydedin.

Haritalama Tablosu

Markdown HTML
# Heading 1 <h1>Heading 1</h1>
**bold** <strong>bold</strong>
*italic* <em>italic</em>
`code` <code>code</code>
Dil belirtilmiş çitli kod <pre><code class="language-js">
- item <ul><li>item</li></ul>
1. item <ol><li>item</li></ol>
> quote <blockquote><p>quote</p></blockquote>
[text](url) <a href="url">text</a>
![alt](src) <img src="src" alt="alt">
--- <hr>
GFM Tablosu <table><thead>...</thead>...
- [x] done <input type="checkbox" checked disabled>

Sintaks Vurgusu

Dil ipuçları içeren çitli kod bloklarına <code> elemanında class="language-xxx" atribütu atanır. Ayrıca, “pre-highlighted” seçeneğini etkinleştirdiğinizde dönüştürücü highlight.js’ten elde edilen tokenize edilmiş çıktıyı doğrudan içine entegre eder; bu özellikle hedef sayfada highlighter runtime yüklenmiyorsa oldukça faydalıdır.

Tam belge vs. parçacık

  • Fragment, yalnızca iç HTML parçasıdır; <h1> veya ilk elemento olan herhangi bir değerle başlayın. Mevcut bir CMS bloğu, e-posta mesajı içeriği veya ön uç bileşene yapıştırın.
  • Tam belge, <!DOCTYPE html>, <html> ve <head> parçalarını tipografi, kod blokları ve tablolar gibi küçük bir varsayılan stil sayfasıyla kaplar. Belgeyi .html olarak kaydedildiğinde herhangi bir tarayıcıda açılır ve ek dosya gereksinimi yoktur.

Satır içi vs. harici CSS

  • Satır içi stiller (aç/kapa), tüm CSS kodunu doğrudan elementlere ekler. Görünüşü kötü olsa da e-posta şablonları için kesinlikle güvenilirdir.
  • Sınıflar (varsayılan), HTML’yi temiz tutar ve stillemeyi sitenizin stil tablosunun üstlenmesini bekler.

Erişilebilirlik Notları

  • Başlıklar, hiyerarşinizin korunmasını sağlayarak semantik olarak <h1>–<h6> biçiminde görüntülenir. Kaynak kodunda seviyeleri atlamayın.
  • Alt metni olmayan resimler <img alt=""> kodunu oluşturur (dekoratif amaçlı resimler için kasıtlı olarak boş alt metin); ancak resmin gerçekten dekoratif bir nitelik taşımadığı durumlar dışında alt metni ekleyin.
  • Tabloların başlık satırı için <thead> kodu kullanılmaktadır; bu da ekran okuyucu navigasyonunu iyileştirir.

Sık Sorulan Sorular

Evet. Kaynaktaki ham HTML, betik etiketleri ve olay öznitelikleri çıkarılarak iletilir. Temizlenmemiş bir çıktıya ihtiyacınız varsa (girdiye güveniyorsanız) bir anahtar mevcuttur; ancak kullanıcı tarafından sağlanan içerikte bunu kullanmayın.

GFM görev listeleri (- [x], - [ ]), <input type="checkbox" disabled> elemanlarına dönüşür. disabled özniteliği, işlenmiş görünümde kazara oluşan durum değişikliklerini önler.

Evet, satır içi stilleri etkinleştirin. Dönüştürücü, her bloğa minimum düzeyde bir stil özniteliği yerleştirir; bu da e-posta uygulamaları (Outlook, Gmail) için gereklidir çünkü bu uygulamalar <style> bloklarını çıkarır.

Matematik eklemesini ve $x^2$ veya $$...$$ bloklarının KaTeX aracılığıyla renderlenmesini etkinleştirin. Çevirici statik SVG veya HTML çıktı üretir; çalışma zamanında MathJax gerekliliği yoktur.

Hayır. Analiz ve HTML oluşturma işlemi tarayıcınızda gerçekleşir. Kaynak ve çıktı hiçbir zaman cihazınızdan çıkmaz.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

Araç diğer dillerde mevcuttur