Softonic

Konwerter Markdown na HTML

Krok 1 / 3
Dalej

Wklej Markdown i odzyskaj czysty, semantyczny HTML, <h1> do <h6>, <ul>, <ol>, <table>, <pre><code> z podświetloną składnią, <blockquote>, automatycznie linkowane adresy URL. Wybierz pełny dokument (z <html>, <head> i minimalnym arkuszem stylów) albo fragment (tylko treść body), zależnie od tego, czy wpinasz go w istniejącą stronę, czy tworzysz samodzielny plik.

Jak konwertować Markdown na HTML

  1. 1

    Wklej Markdown

    Pełny dokument lub fragment. Nagłówek YAML front-matter jest automatycznie usuwany, jeśli występuje.

  2. 2

    Wybierz zestaw rozszerzeń

    Sam CommonMark, GFM (tabele, listy zadań, autolinkowanie) albo GFM + matematyka.

  3. 3

    Wybierz tryb wyjścia

    Fragment do osadzenia albo pełny dokument HTML z nagłówkiem i minimalnym CSS.

  4. 4

    Skopiuj lub pobierz HTML

    Pobierz HTML jako tekst albo zapisz go jako plik `.html`.

Tabela mapowania

Markdown HTML
# Heading 1 <h1>Heading 1</h1>
**bold** <strong>bold</strong>
*italic* <em>italic</em>
`code` <code>code</code>
Kod w płotkach z językiem <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>
Tabela GFM <table><thead>...</thead>...
- [x] done <input type="checkbox" checked disabled>

Podświetlanie składni

Bloki kodu w płotkach z podpowiedzią języka dostają atrybut class="language-xxx" na elemencie <code>. Konwerter wstawia też w kod stokenizowane wyjście z highlight.js, gdy włączysz „pre-highlighted”, przydatne, gdy strona docelowa nie ładuje runtime’u podświetlacza.

Pełny dokument vs fragment

  • Fragment to tylko wewnętrzny HTML, zaczyna się od <h1> lub jakiegokolwiek pierwszego elementu. Wklej go w istniejący blok CMS, treść e-maila albo komponent frontendu.
  • Pełny dokument opakowuje fragment w <!DOCTYPE html>, <html>, <head> z małym domyślnym arkuszem stylów (typografia, bloki kodu, tabele). Zapisz go jako .html i otworzy się w każdej przeglądarce, bez dodatkowych plików.

CSS inline vs zewnętrzny

  • Style inline (przełącznik) wstawiają cały CSS bezpośrednio na elementy. Brzydkie, ale niezawodne dla szablonów e-maili.
  • Klasy (domyślnie) zachowują czysty HTML i oczekują, że arkusz stylów Twojej witryny zajmie się stylowaniem.

Uwagi o dostępności

  • Nagłówki renderują się jako semantyczne <h1>–<h6>, zachowując hierarchię. Nie pomijaj poziomów w źródle.
  • Obrazy bez tekstu alternatywnego dają <img alt=""> (celowo pusty alt dla obrazów dekoracyjnych), ale dodaj tekst alternatywny, chyba że obraz naprawdę jest dekoracją.
  • Tabele dostają <thead> dla wiersza nagłówkowego, co poprawia nawigację dla czytników ekranu.

Najczęściej zadawane pytania

Tak. Surowy HTML ze źródła jest przepuszczany z usuniętymi tagami skryptów i atrybutami zdarzeń. Jeśli potrzebujesz niesanityzowanego wyjścia (ufasz danym wejściowym), jest przełącznik, nie używaj go na treści dostarczonej przez użytkownika.

Listy zadań GFM (- [x], - [ ]) stają się elementami <input type="checkbox" disabled>. Atrybut disabled zapobiega przypadkowym zmianom stanu w wyrenderowanym widoku.

Tak, włącz style inline. Konwerter wstawia minimalny atrybut style na każdy blok, czego potrzebują klienty pocztowe (Outlook, Gmail), bo usuwają one bloki <style>.

Włącz rozszerzenie matematyczne, a bloki $x^2$ lub $$...$$ renderują się przez KaTeX. Konwerter zwraca statyczny SVG lub HTML, żaden runtime MathJax nie jest wymagany.

Nie. Parsowanie i generowanie HTML odbywają się w Twojej przeglądarce. Źródło i wynik nigdy nie opuszczają Twojego urządzenia.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator EditorConfig

Wygeneruj plik .editorconfig z własnymi regułami stylu i rozmiaru wcięć, końca linii, kodowania i białych znaków, aby uzyskać spójne formatowanie w różnych IDE i edytorach.

Walidator adresów e-mail

Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

Narzędzie jest dostępne w innych językach