§

Wklej HTML

§

Surowy

§

Podgląd

Podgląd jest sanityzowany przez DOMPurify — tagi script, atrybuty zdarzeń oraz URI javascript: są usuwane przed renderem.

Markdown to lingua franca dokumentacji oprogramowania w USA i Wielkiej Brytanii. Każde README na GitHubie, odpowiedź na Stack Overflow i komentarz na Reddit przechodzi przez parser Markdown, a ponad 100 milionów postów programistów na Stack Overflow opiera się na CommonMark dla niezawodnego renderowania. Federalne laboratoria USA obsługują pipeline'y MkDocs i Sphinx, które zamieniają pliki źródłowe Markdown w statyczne portale dokumentacji, natomiast projektanci treści GOV.UK piszą strony usług w Markdown przed publikacją. Notion, Obsidian i Bear oferują notowanie Markdown-first milionom pracowników wiedzy w USA i Wielkiej Brytanii, a newslettery Substack kompilują szkice Markdown do wiadomości HTML. Konwertowanie wyeksportowanego HTML z powrotem do Markdown to codzienna praca redaktorów technicznych, opiekunów open-source i inżynierów platform w obu rynkach.

Czym jest konwersja HTML do Markdown?

HTML to wyrenderowany markup wyświetlany przez przeglądarkę — <h1>, <ul>, <table>, <a> i reszta. Markdown to lekki format tekstowy, który używa minimalnej interpunkcji (# dla nagłówków, * dla wyróżnienia, - dla pozycji listy) do kodowania tej samej struktury. GitHub Flavored Markdown (GFM) rozszerza pierwotną specyfikację CommonMark o tabele, przekreślenia, listy zadań i autolinki. Konwersja HTML do Markdown przywraca wyrenderowany lub wyeksportowany HTML do edytowalnego zwykłego tekstu Markdown — dokładnie to, czego potrzebuje migracja treści z CMS lub porządkowanie README.

Które funkcje GitHub Flavored Markdown obsługuje wyjście?

Silnik turndown@7.2.0 z rozszerzeniem turndown-plugin-gfm emituje pełen nadzbiór GFM z Twojego HTML: nagłówki w stylu ATX # do ###### z <h1><h6>, listy uporządkowane i nieuporządkowane z zagnieżdżeniem, pogrubienie **text** i kursywa *text*, przekreślenie ~~text~~ z <del>, linki inline [text](url) i obrazy ![alt](src), bloki kodu z grodzeniem z podpowiedziami języka (```js), fragmenty kodu inline `code`, tabele z separatorem | z <table>, listy zadań GFM - [ ] / - [x] z inputów checkbox, cytaty blokowe > i linie poziome ---. Panel podglądu ponownie renderuje emitowany Markdown przez marked@12.0.2, aby można było wizualnie potwierdzić konwersję.

Jak działa konwersja HTML do Markdown?

Każda konwersja działa lokalnie w Twojej przeglądarce za pomocą trzech dołączonych bibliotek — bez CDN, bez fetch, bez telemetrii. Główne kroki to:

  1. Sanityzacja: wklejony HTML jest najpierw przepuszczany przez DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }), aby usunąć elementy <script>, wszystkie atrybuty obsługi zdarzeń on* i URI javascript:, zanim cokolwiek przejdzie po markup. DOMPurify to ten sam sanityzator XSS, którego używa Mozilla MDN, Atlassian i Microsoft 365.
  2. Konwersja: turndownService.turndown przechodzi po oczyszczonym DOM-ie i emituje GitHub Flavored Markdown — nagłówki stają się prefiksami #, listy elementami - / 1., <table> staje się tabelą z separatorem |, i tak dalej. Markdown jest zapisywany do pola <textarea> tylko do odczytu przez value (nigdy innerHTML), więc jest inherentnie bezpieczny.
  3. Renderowanie: emitowany Markdown jest ponownie parsowany przez marked.parse, oczyszczany przez DOMPurify i przypisywany do innerHTML panelu podglądu, dzięki czemu otrzymujesz wizualne potwierdzenie, że Markdown odtwarza oczekiwaną strukturę. Tryb żywy debounce'uje wejście o 150 ms, więc wyjście aktualizuje się podczas wklejania bez obciążania parsera.

Dlaczego konwertować HTML do Markdown tym narzędziem?

  • Prywatność: każdy przebieg sanityzacji, konwersji i renderowania odbywa się w Twojej przeglądarce. HTML — w tym wyeksportowane posty z CMS, wewnętrzna dokumentacja i poufny kod źródłowy strony — nigdy nie trafi na nasze serwery.
  • XSS-safe domyślnie: wklejony HTML jest przepuszczany przez DOMPurify zanim turndown po nim przejdzie, a panel podglądu ponownie przepuszcza ponownie wyrenderowany HTML przez DOMPurify przed innerHTML, więc wklejenie markup zawierającego tagi <script> lub atrybuty onerror= daje bezczynny podgląd i czysty Markdown.
  • Kompletność GFM: elementy <table> konwertują się do tabel Markdown z separatorem |, <del> do przekreślenia, a listy checkboxów do list zadań GFM. Większość konwerterów online gubi tabele na drodze HTML → Markdown — dołączone rozszerzenie turndown-plugin-gfm je zachowuje.

Jakie są typowe zastosowania konwersji HTML do Markdown?

Konwersja HTML do Markdown pojawia się przy migracji treści, dokumentacji i archiwizacji:

  • Migracja CMS: eksport wpisu WordPress lub Ghost jako HTML i konwersja do Markdown na potrzeby przebudowy z Hugo / Jekyll / 11ty / Astro. Konwersja zachowuje poziomy nagłówków, linki, listy i wyróżnienie inline.
  • Porządkowanie README: wklejenie wyrenderowanego HTML strony wiki lub artykułu i przywrócenie go do edytowalnego Markdown dla README projektu lub strony dokumentacji, zamiast ręcznego przepisywania struktury.
  • Archiwizacja i notatki: uchwycenie wiadomości e-mail HTML lub wycinka strony i konwersja do Markdown w celu przechowywania w Obsidian, Notion lub bazie wiedzy w zwykłym tekście — Markdown pozostaje przyjazny dla diffów i przeżywa zmiany formatu.

Jak wygląda przykład konwersji HTML do Markdown?

Wklejenie <h2>Nagłówek</h2><ul><li>a</li><li>b<ul><li>zagnieżdżony</li></ul></li></ul> produkuje Markdown z ## Nagłówek, zagnieżdżoną listą punktowaną i panelem podglądu, który renderuje się ponownie do tej samej zagnieżdżonej struktury. Wklejenie <table> z wierszem nagłówka i dwoma wierszami danych produkuje równoważną tabelę | kol | kol | — potwierdzając, że konwersja zachowuje nagłówki, listy i tabele.

Czy ten konwerter HTML do Markdown działa w całości w mojej przeglądarce?

Tak. Każdy przebieg sanityzacji, konwersji i renderowania działa lokalnie jako JavaScript w karcie Twojej przeglądarki. Trzy dołączone biblioteki — turndown@7.2.0 (z turndown-plugin-gfm@1.0.2), 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. Wyeksportowane posty, wewnętrzne dokumenty i poufny kod źródłowy strony pozostają na Twoim urządzeniu.

Czy wyrenderowany panel podglądu jest XSS-safe?

Tak. Wklejony HTML jest przepuszczany przez DOMPurify.sanitize zanim turndown po nim przejdzie, a każdy ciąg HTML przypisywany do innerHTML podglądu przechodzi też 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. Domyślny profil html usuwa elementy <script>, każdy atrybut obsługi zdarzenia on* (onerror, onclick itd.) i schematy URI javascript:. 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ą konwertowane z HTML?

Tak. Kierunek HTML → Markdown używa turndown-plugin-gfm, który dodaje własną regułę turndown chodzącą po węzłach <table> i emitującą równoważną tabelę Markdown z separatorem | — wiersz nagłówka, wiersz wyrównania |---|---| i następnie wiersze danych. Większość konwerterów online gubi tabele na tej ścieżce; ten je zachowuje. Przekreślenia (<del>text</del>~~text~~) i listy zadań (<input type="checkbox">- [ ] / - [x]) konwertują się tak samo.

Czy mój HTML zostanie poprawnie przekonwertowany?

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, fragmenty kodu inline, tabele z separatorem |, listy zadań, cytaty blokowe, linie poziome i autolinki — konwersja jest czysta i przewidywalna. Przypadki brzegowe: komentarze HTML (<!-- ... -->) są usuwane (Markdown nie ma składni komentarzy); style inline i atrybuty klas są odrzucane, bo Markdown nie ma odpowiednika; rzadkie tagi inline jak <sub> / <sup> są konwertowane do zwykłego tekstu. To udokumentowane zachowanie turndown, a nie błędy.

Czy podświetlanie składni w blokach kodu z grodzeniem jest obsługiwane?

Nie w v1. Bloki kodu z grodzeniem renderują się w podglądzie 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 HTML do Markdown jest dostarczany z turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2 i DOMPurify@3.1.7 dołączonymi z tego samego źródła, emituje 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.