Konwerter Markdown na HTML
Konwertuj Markdown na HTML w przeglądarce — pełny GitHub Flavored Markdown, podgląd na żywo, podświetlanie składni. Eksportuj fragment HTML, pełny dokument lub HTML ze stylami inline dla e-maila. 100% prywatnie, bez przesyłania.
Własny CSS
Czym jest konwersja Markdown na HTML?
Konwersja Markdown na HTML zamienia dokument zapisany jako zwykły tekst w Markdown — z `#` dla nagłówków, `**pogrubieniem**`, `- ` dla list i `[tekst](url)` dla linków — w HTML, który przeglądarki, systemy zarządzania treścią i klienci poczty faktycznie wyświetlają. Markdown zaprojektowano tak, by był czytelny w surowej postaci i łatwy do pisania, ale przeglądarka nie rozumie `# Nagłówek`; rozumie <h1>Nagłówek</h1>. Konwersja wypełnia tę lukę.
Pod maską procesor Markdown najpierw parsuje Twoje źródło do abstrakcyjnego drzewa składni (AST) — strukturalnej reprezentacji, w której nagłówek, akapit, lista i blok kodu są osobnymi węzłami z własną treścią i atrybutami. Następnie serializuje to drzewo do HTML, emitując właściwe znaczniki i zagnieżdżenie. Praca na AST, a nie podmiana tekstu za pomocą wyrażeń regularnych, to właśnie to, co pozwala konwerterowi poprawnie i przewidywalnie obsługiwać zagnieżdżone listy, tabele i osadzony HTML. Dwie rozpoznawane gramatyki to CommonMark, precyzyjny standard, oraz GitHub Flavored Markdown (GFM), który rozszerza go o tabele, listy zadań, przekreślenia i automatyczne linki.
Powód, dla którego w ogóle konwertujesz, jest taki, że niemal każdy cel publikacji oczekuje HTML, a nie Markdown. Generator stron statycznych, pole tekstu sformatowanego w CMS-ie, szablon wiadomości i karta przeglądarki — wszystkie renderują HTML. Typowy proces to więc pisanie w wygodnym Markdown — README, dokumentacja, szkic wpisu na blog, notatki — i konwersja na HTML w momencie publikacji. To narzędzie wykonuje tę konwersję lokalnie i pokazuje podgląd na żywo, więc widzisz wyrenderowany rezultat i możesz skopiować dokładnie taki HTML, jakiego potrzebujesz: fragment, pełną stronę lub gotowy do e-maila znacznik ze stylami inline.
Operacja odwrotna — HTML z powrotem na Markdown — jest równie przydatna, gdy przenosisz istniejącą treść webową do systemu opartego na Markdown. W tym celu przełącz się na kartę HTML → Markdown lub otwórz dedykowany konwerter HTML na Markdown.
Markdown in:
# Release Notes
We shipped **tables** and `code`:
| Feature | Status |
| ------- | ------ |
| GFM | Done |
- [x] Parse to an AST
- [ ] Profit
HTML out:
<h1>Release Notes</h1>
<p>We shipped <strong>tables</strong> and <code>code</code>:</p>
<table>
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
<tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
<li class="task-list-item"><input type="checkbox" disabled> Profit</li>
</ul> Kluczowe funkcje
Podgląd na żywo w podzielonym panelu
Pisz Markdown po lewej i obserwuj, jak renderuje się po prawej w czasie rzeczywistym, a wynik HTML buduje się poniżej. Podgląd renderuje się w odizolowanej ramce iframe, więc widzisz to, co pokaże przeglądarka — a wklejone skrypty nie mogą się wykonać.
Pełny GitHub Flavored Markdown
Nie tylko CommonMark — pełny nadzbiór GFM: tabele z kreskami pionowymi, listy zadań (`- [x]`), przekreślenia (`~~`), automatyczne linki z URL i bloki kodu w ogrodzeniu. README lub zgłoszenie napisane dla GitHuba renderuje się tutaj dokładnie tak, jak tam.
Podświetlanie składni
Oznacz blok kodu w ogrodzeniu jego językiem (```js, ```python, ```sql), a konwerter go podświetli, opakowując tokeny w elementy span z klasą języka na elemencie <code>. Połącz z arkuszem stylów podświetlania na swojej stronie, aby uzyskać kolory.
Trzy formaty wyniku
Eksportuj Fragment HTML (znacznik treści do szablonu lub CMS-a), Pełny dokument (samodzielną stronę , którą zapiszesz jako .html) lub HTML E-mail inline ze stylami przeniesionymi na każdy element, by Outlook i inni klienci renderowali go poprawnie.
Panel Własny CSS
Wstrzyknij własny CSS do podglądu na żywo, aby dopasować typografię witryny lub naśladować styl README z GitHuba. Wpisz reguły jak h1 { color: #0969da; }, a podgląd zaktualizuje się natychmiast, nie naruszając czystego HTML, który kopiujesz.
Ściągawka składni GFM
Szybki przewodnik po składni, która tworzy HTML: `# H1` → nagłówek, `**pogrubienie**` → <strong>, `*kursywa*` → <em>, `- element` → lista, `1. element` → lista numerowana, `[tekst](url)` → link, `` `kod` `` → kod inline, ` ```jęz ` → kod w ogrodzeniu, `> cytat` → cytat blokowy, `| a | b |` → tabela, `- [ ]` → lista zadań, `~~tekst~~` → przekreślenie.
100% prywatnie, w przeglądarce
Każda konwersja działa lokalnie z użyciem JavaScriptu — Twój Markdown i HTML nigdy nie opuszczają urządzenia, nigdy nie trafiają na serwer i działają offline po wczytaniu strony. Bezpieczne dla niewydanej dokumentacji, wewnętrznych plików README i informacji o wydaniu objętych embargiem.
Przykłady
Tabela GFM na element HTML <table>
| Narzędzie | Szybkość | | --------- | -------- | | GFM | Szybkie |
<table> <thead><tr><th>Narzędzie</th><th>Szybkość</th></tr></thead> <tbody><tr><td>GFM</td><td>Szybkie</td></tr></tbody> </table>
Tabele z kreskami pionowymi w GitHub Flavored Markdown nie są częścią zwykłego CommonMark, ale ten konwerter je rozumie i emituje prawidłowy semantyczny element <table> z <thead> i <tbody> — gotowy do ostylowania lub wstawienia do CMS-a.
Lista zadań na HTML z polami wyboru
- [x] Napisz README - [ ] Skonwertuj go na HTML
<ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Napisz README</li> <li class="task-list-item"><input type="checkbox" disabled> Skonwertuj go na HTML</li> </ul>
Składnia list zadań GFM `- [x]` / `- [ ]` staje się prawdziwymi, wyłączonymi polami wyboru, dokładnie tak, jak GitHub renderuje listę kontrolną — więc skopiowany README wygląda tak samo na Twojej własnej stronie.
Blok kodu w ogrodzeniu na podświetlony <pre><code>
```js const html = md.render(src) ```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src) </code></pre>
Dodaj nazwę języka po otwierającym ogrodzeniu, a konwerter zastosuje podświetlanie składni, opakowując tokeny w elementy span i nadając klasę language-js elementowi <code>. Połącz to z arkuszem stylów podświetlania, a kod zyska kolory.
README na pełny dokument HTML
# Mój projekt Krótki opis oraz <a href="https://example.com">link</a>.
<!doctype html> <html lang="pl"> <head><meta charset="utf-8"><title>Mój projekt</title></head> <body> <h1>Mój projekt</h1> <p>Krótki opis oraz <a href="https://example.com">link</a>.</p> </body> </html>
Przełącz wynik na Pełny dokument, a konwerter opakuje wyrenderowany HTML w kompletną stronę z sekcją <head> i deklaracją zestawu znaków — samodzielny plik .html, który otworzysz w dowolnej przeglądarce lub pobierzesz bezpośrednio.
Jak skonwertować Markdown na HTML
- 1
Wpisz lub wklej swój Markdown
Wstaw swój Markdown — README, informacje o wydaniu, treść zgłoszenia — do panelu wejściowego. Obsługiwany jest pełny GitHub Flavored Markdown: tabele, listy zadań, przekreślenia, automatyczne linki i bloki kodu w ogrodzeniu. Podgląd na żywo i wynik HTML aktualizują się w miarę pisania, w całości w przeglądarce.
- 2
Wybierz format wyniku
Wybierz Fragment HTML do wklejenia w szablon lub CMS, Pełny dokument dla samodzielnej strony .html albo E-mail inline dla HTML ze stylami inline, który przetrwa w Outlooku. Dodaj znaczniki języka do ogrodzeń kodu, aby uzyskać podświetlanie składni, i użyj panelu Własny CSS, aby ostylować podgląd.
- 3
Skopiuj lub pobierz
Kliknij Kopiuj, aby przechwycić HTML, lub Pobierz, aby zapisać go jako plik. Aby odwrócić konwersję, przełącz się na kartę HTML → Markdown i wklej swój HTML, by odzyskać czysty Markdown.
Częste pułapki
Nieeskejpowany HTML połknięty w tekście
Markdown przepuszcza surowy HTML, więc nawias kątowy, który miałeś na myśli jako tekst — jak pisanie o <Component> czy ogólnym List<T> — jest parsowany jako znacznik HTML i znika z wyniku. Eskejpuj nawias odwrotnym ukośnikiem lub encją HTML albo opakuj tekst w element kodu, by wyrenderował się dosłownie.
Użyj komponentu <Header> do opakowania stron. <!-- <Header> jest parsowany jako znacznik i znika -->
Użyj komponentu `<Header>` do opakowania stron. <!-- grawisy zachowują go dosłownie: renderuje <Header> -->
Niewyrównane lub błędne kreski pionowe w tabeli
Tabela GFM potrzebuje wiersza nagłówka, wiersza separatora z myślnikami oraz co najmniej jednej kreski pionowej na wiersz. Pominięcie wiersza separatora lub inna liczba kolumn niż w nagłówku psuje tabelę — wraca ona do zwykłego akapitu kresek. Komórki nie muszą wyrównywać się wizualnie, ale każdy wiersz musi mieć tę samą liczbę kolumn.
| Imię | Rola | | Ala | Admin | <!-- brak wiersza separatora |---|---|: to nie tabela -->
| Imię | Rola | | ---- | ---- | | Ala | Admin | <!-- wiersz separatora obecny: renderuje tabelę -->
Ogrodzenie kodu bez języka
Blok kodu w ogrodzeniu bez ciągu informacyjnego o języku renderuje się jako blok <pre><code> bez klasy języka, więc nie dostaje podświetlania składni. Kod nadal się pojawia, tyle że monochromatyczny. Dodaj język zaraz po otwierających grawisach, aby włączyć podświetlanie; spacja między grawisami a nazwą je wyłącza.
``` const x = 1 ``` <!-- brak języka → brak podświetlania -->
```js const x = 1 ``` <!-- language-js → podświetlony -->
Użycie fragmentu tam, gdzie potrzebny jest pełny dokument
Skopiowanie wyniku Fragment HTML i zapisanie go bezpośrednio jako pliku .html tworzy stronę bez typu dokumentu, bez zestawu znaków i bez <html>/<head>/<body>. Przeglądarki często i tak ją wyrenderują, ale tryb quirks i brak zestawu znaków mogą zepsuć znaki ze znakami diakrytycznymi i układ. Gdy HTML musi być samodzielny, przełącz się na format Pełny dokument.
<h1>Tytuł</h1> <p>Zapisane jako page.html — bez typu dokumentu, bez zestawu znaków.</p>
<!doctype html> <html lang="pl"><head><meta charset="utf-8"><title>Tytuł</title></head> <body><h1>Tytuł</h1><p>Kompletna, samodzielna strona.</p></body></html>
Typowe zastosowania
- Publikuj na stronie statycznej lub w CMS-ie
- Napisz treść w Markdown, skonwertuj na fragment HTML i wklej go do szablonu strony statycznej lub pola tekstu sformatowanego w CMS-ie. Otrzymujesz czysty, semantyczny znacznik — nagłówki, listy, tabele — bez otoczki strony stojącej na przeszkodzie.
- Podejrzyj README, zanim go wypchniesz
- Wklej swój README.md i obserwuj, jak podgląd na żywo renderuje go z pełnym GFM — tabele, listy zadań, kod w ogrodzeniu — więc wyłapiesz zepsutą tabelę lub brakujące ogrodzenie kodu przed commitem, a nie po tym, jak GitHub pokaże go światu.
- Zamień notatki w udostępnialną stronę WWW
- Notatki ze spotkania, dokument projektowy czy szkic napisany w Markdown staje się kompletną stroną HTML jednym kliknięciem. Wybierz Pełny dokument, pobierz plik .html i masz coś, co otworzysz w dowolnej przeglądarce lub umieścisz gdziekolwiek.
- Buduj bezpieczny dla e-maila HTML ze stylami inline
- Klienci poczty usuwają bloki <style>, więc napisz wiadomość w Markdown i wyeksportuj format E-mail inline, który przenosi CSS na każdy element jako atrybut style. Wynik renderuje się poprawnie w Outlooku i innych klientach ignorujących style na poziomie dokumentu.
- Skonwertuj plik .md na pobieralny .html
- Potrzebujesz offline'owej, samodzielnej wersji HTML dokumentu Markdown? Wklej go, wybierz Pełny dokument i Pobierz — otrzymasz samodzielny plik .html z właściwym typem dokumentu i zestawem znaków, bez żadnego narzędzia kompilacji ani wiersza poleceń.
- Osadź wyrenderowaną dokumentację w aplikacji
- Generujesz dokumentację, dzienniki zmian lub treści pomocy z Markdown przechowywanego w repozytorium? Użyj tego narzędzia, aby zobaczyć dokładnie, jaki HTML tworzy dane źródło Markdown, by dopasować silnik renderujący Twojej aplikacji i ostylować wynik.
Szczegóły techniczne
- CommonMark a GitHub Flavored Markdown
- CommonMark to ścisła, jednoznaczna specyfikacja Markdown, która definiuje dokładnie, jak parsują się nagłówki, wyróżnienia, listy, linki i bloki kodu. GitHub Flavored Markdown (GFM) to ścisły nadzbiór: zachowuje wszystko, co definiuje CommonMark, i dodaje cztery rozszerzenia — tabele z kreskami pionowymi, elementy list zadań (`- [x]`), przekreślenie (`~~tekst~~`) oraz automatyczne linki z gołych adresów URL. Ponieważ GFM tylko dodaje funkcje, każdy prawidłowy dokument CommonMark jest też prawidłowym GFM. Ten konwerter implementuje nadzbiór GFM, więc dokumenty napisane dla obu gramatyk renderują się poprawnie.
- Bezpieczne dla XSS renderowanie w izolacji
- Markdown celowo dopuszcza osadzony surowy HTML, co oznacza, że dokument Markdown może zawierać znacznik <script> lub procedurę obsługi zdarzenia jak onerror. Podgląd na żywo broni się przed tym, renderując wewnątrz <iframe sandbox=""> z wyłączonym wykonywaniem skryptów, więc aktywna treść w Twoim wejściu nie może się wykonać podczas podglądu — co jest istotne, gdy konwertujesz Markdown z niezaufanego źródła. Serializowany HTML, który narzędzie zwraca, to wierne odwzorowanie Twojego wejścia; jeśli planujesz publikować HTML wyprowadzony z niezaufanego Markdown, przepuść go przez narzędzie oczyszczające, takie jak DOMPurify, na swoim serwerze, zanim go udostępnisz.
- Zgodność z HTML w e-mailu
- HTML w e-mailu jest renderowany przez zlepek silników o notorycznie ograniczonej obsłudze CSS. Outlook w systemie Windows używa silnika renderującego Worda i ignoruje bloki <style> w nagłówku dokumentu, więc każde stylowanie oparte na klasach po cichu znika; niezawodne podejście to atrybuty style inline na każdym elemencie, co właśnie tworzy wynik E-mail inline. Obrazy to kolejna pułapka: wielu klientów blokuje obrazy zdalne, dopóki odbiorca się nie zgodzi, więc osadzenie małych obrazów jako data URI renderuje je natychmiast, podczas gdy duże obrazy zdalne mogą się w ogóle nie pojawić. Trzymaj znacznik prosty i testuj go w docelowych klientach.
- Synchroniczne podświetlanie w przeglądarce
- Gdy blok kodu w ogrodzeniu niesie ciąg informacyjny o języku (```js), konwerter uruchamia na jego zawartości synchroniczne narzędzie podświetlające, tokenizując źródło i opakowując każdy token w element <span> z klasą taką jak hljs-keyword lub hljs-string, plus klasą language-js na elemencie <code>. Podświetlanie jest wyłącznie strukturalne — dodaje klasy, a nie kolory — więc strona docelowa potrzebuje pasującego arkusza stylów podświetlania, aby wyrenderować paletę. Ponieważ działa synchronicznie w przeglądarce, podświetlony HTML pojawia się w chwili, gdy piszesz, bez żadnego zapytania sieciowego.
Dobre praktyki
- Dobierz format wyniku do celu
- Dopasuj format do tego, dokąd trafia HTML. Pole CMS-a lub szablon mają już otoczkę strony, więc wklej Fragment HTML. Plik, który chcesz otworzyć bezpośrednio w przeglądarce, potrzebuje Pełnego dokumentu z typem dokumentu i zestawem znaków. E-mail potrzebuje E-mail inline, by style przetrwały u klientów usuwających bloki <style>. Wklejenie złego kształtu to najczęstszy, łatwy do uniknięcia błąd.
- Zawsze oznaczaj ogrodzenia kodu językiem
- Zapisz język zaraz po otwierających grawisach — ```js, ```python, ```sql — bez spacji, aby konwerter mógł podświetlić blok i dodać właściwą klasę języka. Samo ogrodzenie tworzy nieostylowany, niepodświetlony kod. Użyj języka, który rozpoznaje narzędzie podświetlające; nieznana lub błędnie zapisana nazwa zostanie potraktowana jako zwykły tekst.
- Oczyść niezaufany Markdown przed publikacją
- Podgląd jest izolowany, ale HTML, który narzędzie emituje, to wierne odwzorowanie — łącznie z każdym surowym HTML lub <script> w wejściu. Jeśli ten Markdown pochodzi od użytkowników lub z innego niezaufanego źródła i zamierzasz serwować wynik innym osobom, przepuść HTML przez narzędzie oczyszczające, takie jak DOMPurify, na swoim serwerze. Izolacja chroni Ciebie podczas konwersji, a nie Twoich odwiedzających po publikacji.
- Trzymaj HTML w e-mailu prosty i inline
- Dla e-maila preferuj format E-mail inline, trzymaj układ prosty i unikaj funkcji CSS, które Outlook i inni klienci odrzucają. Osadzaj małe obrazy jako data URI, by renderowały się nawet wtedy, gdy obrazy zdalne są blokowane, i zawsze wyślij sobie test przed szerszą wysyłką — renderowanie e-maili to najmniej wyrozumiały cel, jaki HTML ma.
- Eskejpuj dosłowne znaki HTML w tekście
- Jeśli chcesz, by dosłowny < lub & pojawił się jako tekst, a nie był interpretowany jako znacznik lub encja, eskejpuj go odwrotnym ukośnikiem (\<) lub encją HTML (<). Markdown przepuszcza surowy HTML, więc nieeskejpowany <example> w tekście może zostać połknięty jako nieznany znacznik i zniknąć z wyrenderowanego wyniku.
Najczęściej zadawane pytania
Czy obsługuje GitHub Flavored Markdown (GFM)?
Jak uzyskać bezpieczny dla e-maila HTML ze stylami inline?
Jaka jest różnica między fragmentem HTML a pełnym dokumentem?
Czy wyrenderowany HTML jest bezpieczny pod kątem XSS przy podglądzie?
Czy mogę dodać własny CSS do podglądu?
Czy moje pliki lub tekst są przesyłane na serwer?
Czy działa offline?
Jak skonwertować plik Markdown (.md) na plik HTML?
Dlaczego mój blok kodu nie jest podświetlony?
Czy mogę skonwertować HTML z powrotem na Markdown?
Powiązane narzędzia
Zobacz wszystkie narzędzia →Koder i dekoder Base64
Kodowanie i formatowanie
Zakoduj i zdekoduj Base64 online za darmo. Konwersja w czasie rzeczywistym z pełną obsługą UTF-8 i emoji. 100% w przeglądarce, bez rejestracji.
Konwerter Base64 na obraz
Kodowanie i formatowanie
Zdekoduj ciąg Base64 lub data URI z powrotem na obraz w przeglądarce. Podejrzyj, odczytaj wymiary i MIME, a potem pobierz jako PNG, JPG, GIF, SVG. Bez przesyłania.
Konwerter CSV na JSON
Kodowanie i formatowanie
Konwertuj CSV na JSON w przeglądarce. RFC 4180, wnioskowanie typów, nagłówek, big-int safe. 100% prywatnie, bez wysyłki.
Konwerter HTML na Markdown
Kodowanie i formatowanie
Konwertuj HTML na czysty Markdown w przeglądarce — tabele GFM, listy zadań i linki. Wybierz nagłówki ATX/Setext oraz linki inline lub referencyjne. Idealne do migracji treści webowej lub zasilania LLM. 100% prywatnie.
Konwerter obrazu na Base64
Kodowanie i formatowanie
Konwertuj obrazy na data URI Base64 w przeglądarce — PNG, JPG, GIF, WebP, SVG, ICO. Kopiuj wynik HTML, CSS, Markdown i JSON. 100% prywatnie, bez przesyłania.
JSON Diff (Porównaj)
Kodowanie i formatowanie
Porównaj dwa pliki JSON natychmiast w przeglądarce. Podświetlanie obok siebie, wynik JSON Patch (RFC 6902), ignorowanie szumliwych pól jak znaczniki czasu i identyfikatory. 100% prywatności, bez przesyłania.