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

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.

Webpack Yapılandırma Oluşturucu

Saf JavaScript, React veya Vue için webpack 5 uyumlu bir webpack.config.js oluşturun: TypeScript, Babel, CSS veya Sass, görseller, HtmlWebpackPlugin, geliştirme sunucusu ve npm install satırı.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Tamamlayıcı Renk Bulucusu

Her girdi için tamamlayıcı renk belirleyin. HSL açısından tersi renk, bölünmüş tamamlayıcı çifti ve erişilebilir kombinasyonlar için öneriler geri verir.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Araç diğer dillerde mevcuttur