Podgląd Markdown
Zobacz wyrenderowany Markdown na bieżąco, w swojej przeglądarce, z całym surowym HTML-em zneutralizowanym zamiast wykonanym.
Działa w całości w twojej przeglądarce. Nic nie jest wysyłane, logowane ani przechowywane.
Wygenerowany HTML
Pisz Markdown po lewej i czytaj go po prawej. Wszystko dzieje się w twojej przeglądarce, więc szkic, którego nie chcesz jeszcze nikomu pokazywać, nie musi najpierw trafić na żaden serwer.
Jak to działa
Dokument jest czytany wiersz po wierszu i dzielony na bloki — nagłówki, akapity, listy, cytaty, kod, tabele — a potem tekst każdego bloku jest przeszukiwany pod kątem elementów w wierszu: wyróżnień, fragmentów kodu, linków i obrazów. Wszystko, czego renderer nie rozpoznaje, pozostaje tekstem.
Surowy HTML jest zamieniany na encje, a nie przepuszczany. Jeśli wpiszesz znacznik, zobaczysz znacznik. To celowe odejście od większości rendererów, które dopuszczają wybrany podzbiór, a powodem jest to, że prawidłowy dobór tego podzbioru to zadanie, które raz po raz kończyło się błędami w znacznie większych projektach.
Link powstaje tylko wtedy, gdy jego adres zaczyna się od schematu z krótkiej listy, sprawdzanego na zdekodowanej postaci adresu, a nie na tym, co wpisano. Gdy link zostaje odrzucony, tekst zostaje, a link nie, więc widać, że coś tam było.
Przykłady
| Przypadek | Dane wejściowe | Wynik |
|---|---|---|
| Wyróżnienie i kod w tekście | **bold**, *italic* and `code`. | <p><strong>bold</strong>, <em>italic</em> and <code>code</code>.</p> |
Najczęściej zadawane pytania
Czy mój dokument jest gdzieś wysyłany?
Nie. Renderer to JavaScript działający na tej stronie. Nic nie jest przesyłane, logowane ani zapisywane: możesz odłączyć sieć, a narzędzie nadal będzie działać.
Dlaczego mój HTML pojawia się jako tekst?
Bo jest celowo zamieniany na encje. Markdown pozwala, by dokument zawierał HTML, a przepuszczenie tego HTML-a oznacza decydowanie, które znaczniki i atrybuty są bezpieczne — decyzję subtelną, zmieniającą się razem z przeglądarkami i taką, przy której nie raz polegały projekty o znacznie większych zasobach. Zamiana wszystkiego na encje nie ma tego słabego punktu. Kosztem jest to, że dokument opierający się na wstawkach HTML nie będzie wyglądał tak jak na GitHubie — i na ten kompromis się tu decydujemy.
Czy to dokładnie CommonMark?
Nie, a twierdzenie, że tak, wprowadzałoby w błąd. To podzbiór, plus tabele, listy zadań i przekreślenie z odmiany GitHuba. Obejmuje nagłówki, akapity, wyróżnienia, fragmenty i bloki kodu, linki, obrazy, listy zagnieżdżone, cytaty i linie poziome. Linki referencyjne, przypisy i bloki HTML nie są zaimplementowane.
Dlaczego obrazy z innych serwerów się nie wyświetlają?
Bo ta strona nie pozwala sobie na wczytywanie obrazów z innych witryn. Pobranie obrazu powiedziałoby tamtemu serwerowi, że czytasz ten dokument i o której godzinie — a to dokładnie ten wyciek, któremu lokalny podgląd ma zapobiegać. Znacznik obrazu jest w wyjściowym HTML-u, więc zadziała tam, gdzie go wkleisz: po prostu nie uruchamia się stąd.
Co się dzieje z linkiem w rodzaju javascript:…?
Nie staje się linkiem. Schemat jest porównywany z krótką listą — http, https, mailto, tel, ftp albo brak schematu w przypadku ścieżki względnej — a sprawdzenie odbywa się na zdekodowanym adresie, bo przeglądarka rozwija encje w atrybucie, zanim na nim zadziała. Tekst linku pozostaje widoczny, więc widać, co tam było.
Warto wiedzieć
- HTML wyświetlany w podglądzie to ten sam HTML, który daje ci narzędzie. Jest jedno wyjście, a nie jedno bezpieczne do wyświetlania i drugie, inne, do kopiowania.
- Nagłówki nie dostają atrybutu id. Identyfikator wzięty z twojego dokumentu dzieliłby przestrzeń nazw z identyfikatorami tej strony, a kolizja zepsułaby stronę otaczającą podgląd.
- Linki do innych witryn mają rel="nofollow noopener noreferrer", więc strona otwarta stąd nie zyskuje żadnej kontroli nad tą.
Wszystkie narzędzia z kategorii Kod