Konwertuj Markdown na HTML online

Dokąd trafia HTML

Markdown przyjemnie się pisze, ale wiele miejsc docelowych przyjmuje wyłącznie HTML: widok źródła w edytorze CMS, szablon e-maila, pole opisu produktu w sklepie internetowym, portal dokumentacji bez obsługi Markdown czy statyczna strona składana ręcznie. Konwersja tutaj daje znaczniki do wklejenia w każde z tych miejsc, a podgląd pozwala sprawdzić wynik, zanim trafi do publikacji.

Konwersja korzysta z dialektu GitHub Flavored Markdown, więc tekst napisany do README, opisu pull requesta czy aplikacji do notatek, takiej jak Obsidian, zachowuje się tu tak samo jak tam.

Jak wygląda wynik

Konwerter tworzy fragment treści (body): same elementy, bez <html>, <head> ani stylów. Zanim go gdzieś wkleisz, warto znać kilka szczegółów:

• Nagłówki nie mają atrybutów id. ## Cennik staje się <h2>Cennik</h2>. Jeśli potrzebujesz kotwic do spisu treści, dodaj identyfikatory samodzielnie.
• Bloki kodu mają klasę języka. Ogrodzenie otwarte przez `python daje <pre><code class="language-python">, które biblioteki podświetlania, takie jak Prism i highlight.js, wychwytują automatycznie. Znaki takie jak < i & wewnątrz kodu są escapowane.
• Listy zadań stają się elementami listy z nieaktywnymi polami wyboru, tak jak renderuje je GitHub.
• Tabele stają się zwykłymi znacznikami <table> z <thead> i <tbody>. Wyrównanie kolumn ustawione dwukropkami w wierszu separatora jest zapisywane jako atrybut align.
• Nie są dołączane żadne style. Podgląd stosuje lekki arkusz stylów, żeby dało się go czytać, ale skopiowany HTML dziedziczy CSS strony docelowej.

Pobrany plik owija fragment w minimalną samodzielną stronę: dokument <!doctype html> z <meta charset="utf-8"> i <title> wziętym z pierwszego nagłówka, dzięki czemu polskie litery i inne znaki spoza ASCII wyświetlają się poprawnie po otwarciu pliku z dysku. Nie dodaje stylów, więc strona używa domyślnych ustawień przeglądarki.

Złamania linii i inne niespodzianki

Większość nieporozumień z Markdown wynika z kilku reguł, które różnią się od edytora tekstu:

• Pojedyncze złamanie linii to nie nowa linia. Dwie linie zapisane jedna pod drugą łączą się w jeden akapit. Zostaw pustą linię, aby zacząć nowy akapit, albo zakończ linię dwiema spacjami lub ukośnikiem wstecznym, aby wymusić <br>. Niektóre edytory, w tym komentarze na GitHubie, traktują pojedyncze złamania jako złamania linii; ten konwerter stosuje standardowe zachowanie używane w plikach README na GitHubie i w większości generatorów stron statycznych.
• Front matter nie jest rozpoznawany. Blok YAML między liniami --- na początku pliku jest renderowany jako linia pozioma, po której następuje tekst, a zamykające --- może zamienić linię nad nim w nagłówek. Przed konwersją usuń front matter.
• Przypisy, wzory matematyczne i diagramy nie są częścią dialektu. $x^2$ zostaje dosłownym tekstem, a blok Mermaid staje się zwykłym blokiem kodu. Ze składnią przypisów jest gorzej niż z ignorowaniem: definicja w rodzaju [^1]: note jest odczytywana jako odwołanie do linku, więc znacznik zamienia się w link wskazujący na słowo note.
• Cudzysłowy pozostają proste. Typograficzne cudzysłowy i myślniki nie są wstawiane; dostajesz dokładnie to, co wpiszesz.
• Lista numerowana, która nie zaczyna się od 1, nie może zaczynać się bezpośrednio pod akapitem. Linie takie jak 3. trzy są wchłaniane do tekstu akapitu, chyba że oddziela je pusta linia. Listy punktowane i listy zaczynające się od 1 nie mają tego problemu.

Surowy HTML i bezpieczeństwo

Markdown dopuszcza surowy HTML, a ten konwerter przepuszcza go bez zmian. Blok <details> czy <span style> napisany ręcznie pojawi się w wyniku dokładnie tak, jak go zapisano. To przydatne, ale oznacza też, że wynik nie jest oczyszczany: znacznik <script> lub atrybut onerror w źródle będzie obecny w skopiowanym HTML.

Sam podgląd działa w ramce w piaskownicy z wyłączonymi skryptami, więc oglądanie tutaj niezaufanego Markdown jest bezpieczne. Wklejenie wynikowego HTML na własną stronę to inna sprawa. Jeśli Markdown pochodzi od użytkowników lub innego niezaufanego źródła, przed publikacją przepuść HTML przez sanitizer po swojej stronie.

Powiązane konwersje

Aby pójść w drugą stronę, ze strony internetowej lub eksportu CMS z powrotem do Markdown, użyj narzędzia HTML na Markdown. Dla dokumentów Word narzędzie DOCX na Markdown tworzy Markdown, który możesz następnie obejrzeć w podglądzie i przekonwertować tutaj. Wszystko działa w przeglądarce w trakcie pisania, więc szkice i wewnętrzna dokumentacja nigdy nie trafiają na serwer.