Zamień HTML na czysty Markdown

Jak zamienić HTML na Markdown

1. Dodaj swój HTML. Wklej kod do pola, otwórz lokalny plik .html albo skopiuj fragment dowolnej strony i wklej go: przy włączonym wklejaniu z formatowaniem konwerter bierze ze schowka sformatowany HTML zamiast zwykłego tekstu.
2. Podaj bazowy adres, jeśli linki są względne. Kod skopiowany ze źródła strony często zawiera linki takie jak /docs/setup. Wpisz adres strony, a każdy link względny i obraz stanie się bezwzględny.
3. Wybierz styl Markdownu. Ustawienia domyślne (nagłówki ATX, punktory z myślnikiem, ogrodzony kod, linki w tekście, GFM włączony) pasują do GitHuba, GitLaba, Obsidiana, większości generatorów stron statycznych i narzędzi AI.
4. Skopiuj albo pobierz. Wynik aktualizuje się podczas pisania. Skopiuj go do schowka albo zapisz jako plik .md nazwany od pierwszego nagłówka.

Co jest konwertowane, element po elemencie

Markdown ma znacznie mniejszy słownik niż HTML, więc prawdziwe zadanie konwertera to decyzja, czym ma się stać każdy element. Oto, co robi to narzędzie:

• Nagłówki <h1>–<h6> stają się # do ######. Styl Setext podkreśla tylko H1 i H2, bo tyle obsługuje ta składnia; H3 i niższe nadal używają #.
• Pogrubienie i kursywa (<strong>, <b>, <em>, <i>) używają wybranych przez Ciebie ograniczników.
• Linki stają się [tekst](url "tytuł") albo numerowanymi odnośnikami zebranymi na końcu dokumentu, gdy wybierzesz linki z odnośnikami. Linki uruchamiające skrypty (javascript:) lub niosące dane data: zostają zredukowane do samego tekstu.
• Obrazy stają się ![alt](src). Obrazy ładowane leniwie, które trzymają prawdziwy adres w data-src, też są wychwytywane. Obrazy data: osadzone w treści są pomijane, bo blok base64 czyni plik Markdown nieczytelnym.
• Listy, także zagnieżdżone na kilka poziomów, są wcinane pod elementem nadrzędnym. Listy numerowane zachowują numer początkowy (start), więc lista zaczynająca się od 4 nadal zaczyna się od 4.
• Cytaty stają się wierszami z >, razem z cytatami zagnieżdżonymi.
• Kod: <code> w tekście zamienia się w odwrócone apostrofy; bloki <pre> stają się blokami ogrodzonymi z językiem, jeśli został zadeklarowany (zob. niżej).
• Tabele stają się tabelami GFM z kreskami pionowymi. Szczegóły i ograniczenia opisuje następna sekcja.
• Przekreślenie i listy zadań: <del>, <s> i <strike> stają się ~~tekstem~~; elementy listy zaczynające się od pola wyboru stają się - [ ] lub - [x].
• Usuwane w całości: <script>, <style>, <noscript>, <template>, ramki iframe, osadzenia, SVG i canvas. Opakowania układu, takie jak <div> i <span>, są rozpakowywane i zostaje tylko ich tekst, co właśnie sprawia, że Markdown jest mniejszy i łatwiejszy do czytania niż HTML, z którego powstał.

Tabele: co Markdown potrafi, a czego nie

Specyfikacja GitHub Flavored Markdown (po angielsku) definiuje tabelę jako wiersz nagłówka, wiersz separatora z kresek i wiersze treści. Trzy reguły ze specyfikacji decydują o tym, jak konwertują się tabele HTML:

• Wiersz nagłówka jest wymagany. Wiele tabel HTML, zwłaszcza wklejonych z arkuszy kalkulacyjnych lub starych stron CMS, w ogóle nie ma komórek <th>. Pozostawione bez zmian nie mogłyby stać się tabelami Markdown, więc domyślnie konwerter robi z pierwszego wiersza nagłówek. Odznacz opcję, jeśli wolisz zostawić takie tabele jako HTML.
• Treść blokowa nie może mieszkać w komórce. Specyfikacja stanowi, że elementów blokowych nie można wstawiać do tabeli, więc akapity i podziały wierszy w komórce są spłaszczane do jednego wiersza. Listy w komórkach tracą strukturę; jeśli tabela zawiera bogatą treść, rozważ pozostawienie jej jako HTML.
• Dosłowny znak kreski pionowej trzeba zabezpieczyć. Znak | w komórce rozpocząłby nową kolumnę, więc konwerter zapisuje go jako \|, co specyfikacja dopuszcza w każdym miejscu komórki, także w kodzie w tekście.

Połączone komórki są obsługiwane częściowo: po komórce z colspan="3" następują dwie puste komórki, żeby kolumny pozostały wyrównane. Scalania wierszy nie ma w Markdownie i nie jest odtwarzane. Element <caption> trafia nad tabelę jako osobny akapit, a wyrównanie kolumn z atrybutów align staje się :--, :-: lub --: w wierszu separatora.

Bloki kodu i kolorowanie składni

Ogrodzone bloki kodu mogą mieć po otwierającym ogrodzeniu ciąg informacyjny, na przykład ```python, którego renderery używają do kolorowania kodu. Konwerter szuka języka tam, gdzie umieszczają go biblioteki kolorowania: w klasach language-* i lang-* (Prism, highlight.js i większość rendererów Markdown), w opakowaniu GitHuba highlight-source-* oraz w atrybutach data-lang lub data-language. Element <pre> bez wewnętrznego <code> nadal jest traktowany jako blok kodu, a nie jako tekst do zabezpieczenia.

Tekst kodu jest brany dosłownie, więc znaczniki kolorowania (te wszystkie kolorowe elementy <span>) znikają bez naruszania samego kodu. Jeśli sam kod zawiera ciąg trzech odwróconych apostrofów, ogrodzenie jest dłuższe niż ten ciąg, bo specyfikacja wymaga, żeby ogrodzenie zamykające było co najmniej tak długie jak otwierające; dzięki temu dokumentacja Markdownu zapisana w Markdownie pozostaje nienaruszona.

Opcje, wyjaśnione

Nagłówki ATX czy Setext

Nagłówki ATX (# Tytuł) działają dla wszystkich sześciu poziomów i są tym, czego oczekuje niemal każde narzędzie. Nagłówki Setext podkreślają tekst znakami === lub ---; niektóre przewodniki stylu wolą je dla H1 i H2, ale nie wyrażą H3 i niższych.

Linki w tekście czy z odnośnikami

Linki w tekście trzymają każdy adres obok jego tekstu, co pasuje do krótkich dokumentów i promptów AI. Linki z odnośnikami przenoszą adresy na numerowaną listę na dole, co utrzymuje czytelność długich akapitów w edytorze tekstu i jest częste w repozytoriach z dokumentacją.

Zabezpieczanie znaków Markdown

Tekst taki jak 2024. Dobry rok albo file_name_here zostałby błędnie odczytany jako lista lub kursywa, więc konwerter zabezpiecza te znaki ukośnikami odwrotnymi. To poprawne dla wszystkiego, co będzie renderowane. Gdy wynik trafia do czatu z modelem AI, indeksu wyszukiwania albo zwykłej notatki tekstowej, odznacz zabezpieczanie, żeby tekst był czystszy.

Bazowy adres URL

Adresy względne mają sens tylko na stronie, z której pochodzą. Przy ustawionym adresie bazowym ../images/chart.png na https://example.com/blog/post staje się https://example.com/images/chart.png, rozwiązane według tych samych reguł co w przeglądarkach.

Konwersja całej strony internetowej

Ten konwerter nie pobiera adresów URL. Strona w przeglądarce nie może odczytać HTML innej witryny, jeśli ta na to nie pozwala, a wiele nowoczesnych stron składa treść w JavaScripcie po załadowaniu, więc pobranie po stronie serwera często zwróciłoby pustą powłokę. Kopiowanie z wyrenderowanej strony omija oba problemy: zaznacz artykuł, skopiuj i wklej tutaj. Dostajesz tekst, który faktycznie widzisz, z linkami i formatowaniem, bez nawigacji, banerów cookies i reklam, których nie zaznaczyłeś. Jeśli zamiast tego chcesz wyciągnąć ze strony wszystkie linki, użyj ekstraktora linków.

Typowe problemy i rozwiązania

• Tabela pojawia się w wyniku jako HTML. GFM jest wyłączony albo wyłączone jest awansowanie nagłówka, a tabela nie ma wiersza nagłówka. Włącz z powrotem jedną z opcji.
• Linki prowadzą w złe miejsce. Były względne. Dodaj adres strony jako adres bazowy.
• Podziały wierszy wyglądają dziwnie. <br> staje się dwiema spacjami na końcu i nowym wierszem, czyli twardym złamaniem wiersza z CommonMark. Niektóre edytory przycinają końcowe spacje przy zapisie, co zamienia je z powrotem w miękkie złamanie.
• Brakuje tekstu. Jeśli HTML pochodzi z podglądu źródła strony mocno opartej na JavaScripcie, treści może w ogóle nie być w kodzie. Skopiuj ją ze strony wyrenderowanej.
• Wszystko jest jednym akapitem. Źródło używało elementów <div> zamiast <p> do akapitów. Markdown zna tylko elementy semantyczne, więc strona zbudowana ze stylizowanych divów konwertuje się na ciągi zwykłego tekstu.

Po co w ogóle zamieniać HTML na Markdown?

Markdown zachowuje to, co niesie znaczenie (nagłówki, wyróżnienia, linki, listy, tabele, cytaty i kod), a odrzuca znaczniki układu i style w tekście. Dzięki temu łatwiej go edytować, przeglądać w systemie kontroli wersji, przenieść do bazy wiedzy takiej jak Obsidian albo do serwisu z dokumentacją, lub przekazać modelowi AI bez marnowania jego kontekstu na atrybuty class. Programiści używają go do migracji treści z CMS do strony statycznej, autorzy do przenoszenia szkiców między edytorami, a badacze do przechowywania czystych kopii źródeł. Jeśli źródła zbierasz, a nie konwertujesz, Marqly może uporządkować linki badawcze (po angielsku) w jednej przeszukiwalnej bibliotece, a strona o pracy programistów (po angielsku) pokazuje, jak zapisane dokumenty i fragmenty kodu pozostają łatwe do znalezienia.

Prywatność od podstaw

Konwerter to otwartoźródłowa biblioteka Turndown z wtyczką Markdownu w stylu GitHuba, plus własna obsługa tabel, kodu i linków tej strony, wszystko dołączone do strony. Po załadowaniu działa offline, a wklejony tekst, pliki i ustawienia zostają na Twoim urządzeniu. Do szybkiego sprawdzenia rozmiaru przed konwersją lub po niej kalkulator czasu czytania także liczy słowa i znaki lokalnie.