Softonic

Podgląd Markdown

Krok 1 / 2
Dalej

Pisz po lewej stronie, a po prawej obserwuj renderowany HTML. Podgląd obsługuje Markdown w stylu GitHub: tabele, listy zadań, ogrodzone bloki kodu z podświetlaniem składni, przekreślenia, automatycznie tworzone odnośniki URL oraz kod HTML w treści. Przydaje się do przygotowania pliku README przed commitem, sprawdzenia, jak będzie wyglądał komentarz w PR, albo po prostu do nauki składni Markdown poprzez obserwowanie renderowania każdego naciśnięcia klawisza.

Jak korzystać z podglądu

  1. 1

    Napisz Markdown

    Lewy panel przyjmuje surowy Markdown. Każda zmiana natychmiast renderuje prawy panel od nowa.

  2. 2

    Zobacz podgląd HTML

    Prawy panel pokazuje wyrenderowany wynik ostylowany tak jak na GitHubie.

  3. 3

    Przełącz tryb

    Widok obok siebie, tylko podgląd albo tylko źródło, do pisania bez rozpraszaczy.

  4. 4

    Skopiuj HTML

    Pobierz wyrenderowany HTML, jeśli musisz go wkleić do klienta poczty lub systemu CMS.

Co obsługuje ten podgląd

  • CommonMark: nagłówki, akapity, wyróżnienia, listy, cytaty blokowe, bloki kodu, odnośniki, obrazy, linie poziome.
  • Rozszerzenia GFM: tabele z wyrównaniem kolumn, listy zadań (- [ ] i - [x]), przekreślenie za pomocą ~~, automatycznie tworzone odnośniki URL oraz ogrodzone bloki kodu ze wskazaniem języka.
  • Podświetlanie składni: ponad 100 języków dzięki highlight.js, JavaScript, Python, Go, Rust, SQL, YAML itd.
  • Surowy HTML: kod HTML w treści jest przepuszczany (dla bezpieczeństwa poddawany oczyszczaniu).
  • Matematyka (opcjonalnie): $...$ w treści i $$...$$ jako blok, jeśli włączysz rozszerzenie matematyczne.

Nieobsługiwane

  • Niestandardowe linki wiki w stylu Obsidian ([[Page]]), dostępne wyłącznie w Obsidian.
  • Ogrodzone bloki div z Pandoc (:::), wyłącznie dla Pandoc.
  • Dołączenia po stronie serwera (server-side includes) lub znaczniki szablonów {% ... %}.

Typowe zastosowania

  • Przygotowanie pliku README poza środowiskiem IDE i wklejenie ostatecznej wersji.
  • Sprawdzenie formatowania komentarzy w PR przed opublikowaniem, pole komentarzy na GitHubie nie pokazuje poprawnie bloków kodu.
  • Zamiana notatek na HTML, gdy trzeba wkleić sformatowaną treść do e-maila lub systemu CMS akceptującego surowy HTML.
  • Nauka Markdown, widok obok siebie sprawia, że składnia staje się oczywista.

Wydajność

Renderowanie korzysta z parsera Markdown-it z wtyczką GFM i działa w całości w przeglądarce. Dokumenty o rozmiarze kilkuset KB renderują się w milisekundach; bardzo duże (cała książka w jednym pliku) mogą się zacinać podczas pisania, w takim przypadku podziel je na rozdziały.

Eksport

  • Kopiuj HTML daje <div> z wyrenderowaną treścią i dołączonymi klasami stylów.
  • Pobierz .md zapisuje źródło.
  • Drukuj do PDF z okna drukowania przeglądarki tworzy ostylowaną kopię PDF wyrenderowanego widoku.

Najczęściej zadawane pytania

GitHub nakłada na GFM własny CSS. Wynikowy HTML powinien być zgodny; stylizacja (czcionki, odstępy) należy do GitHuba. Aby uzyskać pełną zgodność, użyj przełącznika motywu „renderowane na GitHubie”.

Tak, po włączeniu rozszerzenia matematycznego $...$ w treści oraz blok $$...$$ są renderowane za pomocą KaTeX. Domyślnie jest wyłączone, aby strona pozostała lekka.

Jest oczyszczany, bezpieczne znaczniki, takie jak <div>, <span>, <table>, <img>, są przepuszczane; <script> oraz osadzone procedury obsługi zdarzeń są usuwane.

Setki KB działają płynnie. W przypadku bardzo dużych plików wyłącz renderowanie na żywo i renderuj na żądanie.

Renderowanie odbywa się w całości po stronie klienta, a treść nie jest nigdzie wysyłana. Po odświeżeniu strony wersje robocze przepadają, chyba że przeglądarka zachowa stan formularza.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator EditorConfig

Wygeneruj plik .editorconfig z własnymi regułami stylu i rozmiaru wcięć, końca linii, kodowania i białych znaków, aby uzyskać spójne formatowanie w różnych IDE i edytorach.

Walidator adresów e-mail

Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

Narzędzie jest dostępne w innych językach