Czym jest konwersja Markdown do HTML?
Markdown to lekki format tekstowy, który używa minimalnej interpunkcji (# dla nagłówków, * dla wyróżnienia, - dla pozycji listy) do kodowania ustrukturyzowanej prozy. GitHub Flavored Markdown (GFM) rozszerza pierwotną specyfikację CommonMark o tabele, przekreślenia, listy zadań i autolinki. HTML to forma renderowana wyświetlana przez przeglądarkę. Konwersja Markdown do HTML pozwala pisać w lekkiej składni i publikować w formie wyrenderowanej — README, strona statyczna, treść e-maila — bez ręcznego pisania tagów.
Które funkcje GitHub Flavored Markdown są obsługiwane?
Dołączony parser marked@12.0.2 obsługuje pełen nadzbiór GFM: nagłówki w stylu ATX od # do ######, listy uporządkowane i nieuporządkowane z zagnieżdżeniem, pogrubienie **text** i kursywa *text*, przekreślenie ~~text~~, linki inline [text](url) i obrazy inline , bloki kodu z grodzeniem z opcjonalnym tagiem języka (```js), inline'owe fragmenty kodu `code`, tabele z separatorem | i wierszem nagłówka, listy zadań GFM - [ ] / - [x], cytaty blokowe >, linie poziome --- i autolinki. Każdy element renderuje w panelu podglądu tak samo jak GitHub go renderuje.
Jak działa konwersja Markdown do HTML?
Każda konwersja działa lokalnie w Twojej przeglądarce za pomocą dwóch dołączonych bibliotek — bez CDN, bez fetch, bez telemetrii. Główne kroki to:
- Parsowanie:
marked.parse(source)czyta Twój Markdown i produkuje ciąg HTML. Parser działa w trybie GFM, dzięki czemu tabele, listy zadań, przekreślenia i autolinki są rozpoznawane. - Sanityzacja: wyjście HTML jest przepuszczane przez
DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }), zanim zostanie przypisane doinnerHTML. DOMPurify to ten sam sanityzator XSS, którego używa Mozilla MDN, Atlassian i Microsoft 365 — parsuje HTML, chodzi po DOM-ie i usuwa elementy<script>, każdy atrybut obsługi zdarzeniaon*i schematy URIjavascript:. - Renderowanie: sanityzowany HTML jest zapisywany do panelu podglądu przez
innerHTML, a surowy HTML jest wyświetlany w drugim panelu przez tylko do odczytu<textarea>, dzięki czemu możesz skopiować markup. Tryb żywy debounce'uje wejście o 150 ms, więc podgląd aktualizuje się w trakcie pisania bez obciążania parsera.
Dlaczego konwertować Markdown do HTML tym narzędziem?
- Prywatność: każdy przebieg parsowania, sanityzacji i renderowania odbywa się w Twojej przeglądarce. Markdown — w tym nieopublikowane wpisy blogowe, wersje robocze wewnętrznej dokumentacji i poufne pliki README — nigdy nie trafia na nasze serwery.
- XSS-safe domyślnie: panel podglądu przepuszcza każdy ciąg HTML przez DOMPurify przed
innerHTML, więc tag<script>lub atrybutonerror=wewnątrz surowego HTML w Twoim Markdown daje bezczynny podgląd. Zakładka surowa pokazuje niesanityzowaną wyjście do inspekcji w<textarea>przezvalue— nigdy nie zostaje wykonana. - Kompletność GFM: tabele, przekreślenia, listy zadań i autolinki renderują tak jak GitHub je renderuje. Markdown-owa tabela z separatorem | staje się HTML-ową
<table>z<thead>i<tbody>— bez utraconych wierszy, bez spłaszczonej struktury.
Jakie są typowe zastosowania konwersji Markdown do HTML?
Konwersja Markdown do HTML pojawia się w dokumentacji, pracy ze stronami statycznymi i tworzeniu e-maili:
- Pisanie README dla GitHuba: szkicowanie README projektu lokalnie jako Markdown i podgląd przed pushem. Podgląd odpowiada renderowi GFM GitHuba dla tabel, list zadań i bloków kodu z grodzeniem.
- Treść dla strony statycznej: wklejenie posta w Markdown i pobranie HTML dla pola CMS lub silnika szablonów, który oczekuje markupu zamiast źródła Markdown.
- Szablony e-mail: pisanie treści maila transakcyjnego jako Markdown i konwersja do HTML dla silnika szablonów dostawcy poczty. Wyjście to czysty semantyczny HTML — bez stylów inline, bez quirków klienta pocztowego dosypywanych w środku.
Jak wygląda przykład konwersji Markdown do HTML?
Wklejenie # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) produkuje panel podglądu zawierający <h1>Title</h1>, dwuelementową listę nieuporządkowaną oraz <a href="https://example.com">link</a>. Surowy panel pokazuje dokładny ciąg HTML, by skopiować go wprost do szablonu. Tabela z separatorem | zawierająca wiersz wyrównania |---|---| staje się pełną <table> z <thead> i <tbody> — potwierdzając, że tabele GFM renderują tak jak GitHub.
Czy ten konwerter Markdown do HTML działa w całości w mojej przeglądarce?
Tak. Każdy przebieg parsowania, sanityzacji i renderowania działa lokalnie jako JavaScript w karcie Twojej przeglądarki. Dołączone biblioteki — marked@12.0.2 i DOMPurify@3.1.7 — są serwowane z tego samego źródła co strona, więc nie ma zależności od CDN, nie ma fetch, nie ma XMLHttpRequest, nie ma navigator.sendBeacon na wejściu. Narzędzie działa też offline po wczytaniu strony, ponieważ to statyczny pakiet HTML/CSS/JS z bibliotekami vendor obok. Nieopublikowane wpisy, wewnętrzne dokumenty i poufne pliki README pozostają na Twoim urządzeniu.
Czy wyrenderowany panel podglądu jest XSS-safe?
Tak. Każdy ciąg HTML przypisywany do innerHTML najpierw przechodzi przez DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify to otwartoźródłowy sanityzator XSS utrzymywany przez Cure53; to ta sama biblioteka, której używa Mozilla MDN, Atlassian i Microsoft 365, aby utwardzić HTML dostarczany przez użytkowników. Domyślny profil html usuwa elementy <script>, każdy atrybut obsługi zdarzenia on* (onerror, onclick itd.), schematy URI javascript: wewnątrz href / src oraz znane niebezpieczne wyrażenia CSS. Wklejenie <img src=x onerror=alert(1)> produkuje podgląd, w którym document.querySelector('#output-preview img[onerror]') zwraca null i żaden alert się nie odpala.
Czy tabele GFM są obsługiwane?
Tak. Kierunek Markdown → HTML obsługuje tabele z separatorem | natywnie w trybie GFM marked — wiersz nagłówka oddzielony wierszem wyrównania |---|---|, a po nim wiersze danych, produkuje <table> z <thead> + <tbody>. Przekreślenia (~~text~~ → <del>text</del>) i listy zadań (- [ ] / - [x] → <input type="checkbox">) renderują tak samo jak GitHub.
Czy mój Markdown jest konwertowany wiernie?
Dla kanonicznego zestawu funkcji GFM — nagłówki od h1 do h6, listy uporządkowane i nieuporządkowane z zagnieżdżeniem, pogrubienie / kursywa / przekreślenie, linki inline, obrazy inline, bloki kodu z grodzeniem z tagami języka, inline'owe fragmenty kodu, tabele z separatorem |, listy zadań, cytaty blokowe, linie poziome i autolinki — wyjście HTML jest stabilne i odpowiada rendererowi GitHuba. Kilka zachowań do odnotowania: surowy HTML inline wewnątrz Markdown (np. <sub>text</sub>) przechodzi bez zmian do wyjścia, a nagłówki setext CommonMark (podkreślenia ===) i nagłówki ATX (# Title) produkują ten sam <h1>. To udokumentowane zachowanie marked, a nie błędy. Jeśli potrzebujesz odwrotnego kierunku, użyj narzędzia HTML do Markdown.
Czy podświetlanie składni w blokach kodu z grodzeniem jest obsługiwane?
Nie w v1. Bloki kodu z grodzeniem renderują się czcionką o stałej szerokości i subtelnym tłem, ale bez podświetlania tokenów per język. Dodanie podświetlania składni wymagałoby dołączenia Prisma lub highlight.js, z których każdy dodaje 15–40 KB plus plik gramatyki per język i macierz motywów wymagającą uspójnienia z paletą Workshop Terminal. Na razie render skupia się na poprawności i bezpieczeństwie XSS; jeśli pojawi się zapotrzebowanie użytkowników na inline highlighting, opcjonalny przełącznik jest osiągalny w przyszłości.
Ten Konwerter Markdown do HTML jest dostarczany z marked@12.0.2 i DOMPurify@3.1.7 dołączonymi z tego samego źródła, obsługuje pełen zestaw funkcji GFM i sanityzuje każdy wyrenderowany ciąg HTML zanim dotknie DOM-u. Bez uploadu, bez CDN, bez telemetrii — każdy bajt zostaje w Twojej przeglądarce.