HTML i Markdown, w obie strony, w jednym miejscu
Dwa formaty, między którymi programiści skaczą codziennie. Markdown do README, dokumentacji, zgłoszeń na GitHubie, czatów. HTML do prawdziwych stron, szablonów maili, wszystkiego co renderuje przeglądarka. Tłumaczenie między nimi jest żmudne ręcznie i niebezpieczne na regexach, bloki się zagnieżdżają, tagi inline się nakładają, fence'y od kodu zjadają backticki. To narzędzie puszcza konwersję przez prawdziwe parsery po stronie serwera: `turndown` dla HTML do Markdown, `marked` dla Markdown do HTML.
Wklej źródło po lewej, patrz jak wynik pojawia się po prawej razem z podglądem na żywo wyrenderowanego rezultatu. Włącz GitHub Flavored Markdown (tabele, fence'y, przekreślenia), zachowaj albo wytnij surowy HTML w drodze do Markdown, włącz inteligentne cudzysłowy do czystej typografii.
Wszystko leci serwerem, to świadoma decyzja: prawdziwy DOM i prawdziwy lexer Markdown biją regex w przeglądarce w każdym przypadku, a wynik jest sanityzowany, zanim wyjdzie z route'a, więc podgląd nigdy nie zostanie zatruty błąkającym się `<script>`.
Jak używać
- Wybierz kierunek na górze: HTML do Markdown do przenoszenia wpisu z bloga do README, albo Markdown do HTML do wyciągnięcia treści maila z pliku dokumentacji.
- Wklej źródło do pola wejściowego po lewej, albo kliknij Wczytaj przykład, żeby zobaczyć działający szablon z tabelą i blokiem kodu.
- Wyjście aktualizuje się po krótkiej pauzie (około 350 ms), wystarczająco długiej, żeby zebrać naciśnięcia klawiszy, krótkiej na tyle, żeby działać na żywo.
- Użyj przełącznika GitHub Flavored Markdown, żeby włączyć tabele, fence'y na kod i task listy. W 99% przypadków zostaw włączony.
- Włącz Zachowaj surowy HTML, gdy konwertujesz HTML do Markdown i twoje źródło używa tagów, których Markdown nie umie wyrazić (np. `<kbd>`, `<sup>`, `<details>`), zostają dosłownie, zamiast być wyrzucone.
- Inteligentne cudzysłowy zamienia proste cudzysłowy na typograficzne i trzy kropki na prawdziwy wielokropek. Wyłącz, gdy wynik leci do edytora kodu, który nie znosi Unicode.
- Kliknij Zamień kierunek, żeby zrobić round-trip: aktualne wyjście staje się nowym wejściem, kierunek się odwraca. Przydatne, żeby sprawdzić, czy nic nie zginęło.
- Kliknij Kopiuj, żeby wrzucić wynik do schowka, albo Wklej, żeby wciągnąć HTML albo Markdown ze schowka bez wychodzenia ze strony.
Kiedy się przydaje
Sześć konkretnych sytuacji, w których to oszczędza realny czas:
- Wciągasz wpis z bloga do README. Napisałeś długą notkę w CMS-ie (wynik to HTML), chcesz mieć to jako Markdown w repo. Wklej, wybierz HTML do Markdown, skopiuj. Tabele i bloki kodu przeżywają podróż.
- Wysyłasz stronę dokumentacji jako maila. Masz plik Markdown w repo, twoja usługa transakcyjnych maili chce HTML. Skonwertuj raz, wklej HTML do szablonu.
- Czyścisz wklejony rich-text. Word, Notion i Google Docs wszystkie wklejają rozdęty HTML ze stylami inline, zagnieżdżonymi spanami i zupą klas. Wklej tutaj, wybierz HTML do Markdown, dostań czysty string z samą strukturą, nagłówki, listy, linki, kod.
- Migrujesz CMS. Stary serwis eksportuje HTML, nowy (Hugo, Astro, Next.js content collection) czyta Markdown. Konwertuj masowo, strona po stronie, zachowaj strukturę, wytnij style inline.
- Piszesz issue na GitHubie z tabelą. Naszkicowałeś tabelę porównawczą gdzieś w HTML, chcesz ją mieć jako tabelę GFM w issue. Wklej, skonwertuj, wklej na GitHuba. Bałagan z pajpami jest generowany za ciebie.
- Sanity-check renderowania Markdown. Napisałeś długi README i chcesz zobaczyć, jak wygląda na GitHubie. Wklej do Markdown do HTML, zobacz podgląd na żywo. Jeśli fence pęka albo tabela się rozjeżdża, podgląd powie ci natychmiast. Do samego składania README mamy generator README, do edycji tabel edytor tabel Markdown, a do długich dokumentów generator spisu treści.