📝
Edytor Markdown za darmo
Pisz i podglądaj Markdown w czasie rzeczywistym. Obsługuje nagłówki, pogrubienie, kursywę, bloki kodu, tabele i listy.
Działa offline po wczytaniu
90 słowa · 551 znaki
Markdown
Podgląd
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Witaj w edytorze Markdown</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Pisz <strong>Markdown</strong> po lewej stronie, zobacz podgląd na żywo po prawej.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Funkcje</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>Pogrubienie</strong>, <em>kursywa</em> i <del>przekreślenie</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">Kod wbudowany</code> i bloki kodu</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Linki</a></li><li class="my-0.5">Listy, cytaty, tabele i wiele więcej</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Przykład kodu</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown stworzył John Gruber w 2004 roku, aby ułatwić pisanie treści do internetu.</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Funkcja</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Wspierane</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Nagłówki</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Listy</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Tabele</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Kod</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Ściągawka Markdown
# Heading 1H1
**bold**Pogrubiony
*italic*Kursywa
`code`Kod wbudowany
- itemLista punktowana
1. itemLista numerowana
> quoteCytat blokowy
[text](url)Link
Obraz
---Separator
Typowe zastosowania
- Napisz Dokumentację API w MarkdownWersja robocza opisy punktów końcowych, przykłady żądań/odpowiedzi i tabele parametrów w Markdown.
- Rób Notatki w MarkdownNapisz ustrukturyzowane notatki w Markdown, które można wkleić do Notion, Obsidian, Bear lub dowolnej aplikacji Markdown.
- Napisz GitHub README w MarkdownStwórz wersję roboczą i podgląd GitHub README swojego repozytorium dzięki renderowaniu Markdown na żywo.
- Napisz Dokumentację TechnicznąNapisz i podejrzyj dokumenty API, wiki i przewodniki techniczne w Markdown przed opublikowaniem.
- Napisz Wpisy Blog w MarkdownStwórz wersję roboczą wpisów blog w Markdown dla Ghost, Jekyll, Hugo, Hashnode i innych platform publikowania opartych na Markdown.
Jak to działa
Podgląd jest renderowany przez ręcznie napisany parser Markdown wbudowany w narzędzie — bez marked, remark ani żadnej zewnętrznej biblioteki. Tokenizuje źródło wiersz po wierszu w przeglądarce, zamieniając składnię na HTML, który przed wyświetleniem przechodzi przez sanitizer.
- 1Tokenizacja wiersz po wierszuWłasna funkcja renderMarkdown dzieli źródło na wiersze i przechodzi przez nie w jednym przebiegu, dopasowując w kolejności priorytetu ogrodzone bloki kodu, nagłówki (H1–H6), cytaty blokowe, listy numerowane i punktowane, tabele GFM (z wyrównaniem kolumn), linie poziome i akapity.
- 2Rozwijanie składni liniowejKażdy zebrany wiersz lub komórka jest następnie przetwarzany przez inlineMarkdown — łańcuch zamian wyrażeń regularnych obsługujący pogrubienie (** i __), kursywę (* i _), pogrubioną kursywę (***), przekreślenie (~~), kod liniowy (), obrazy () i linki ([tekst](url)) — obrazy są rozwiązywane przed linkami, aby prefiks ! nie został błędnie przechwycony.
- 3Sanityzacja i blokowanie zasobów zdalnychSurowy HTML wygenerowany przez renderer przechodzi przez sanitizer (sanitize-html), który usuwa niebezpieczne znaczniki i atrybuty, takie jak <script>, obsługi onerror i adresy javascript:. Drugi przebieg (neutralizeRemote) domyślnie zastępuje zdalne wartości src obrazów symbolami zastępczymi, aby podgląd nie łączył się po cichu z zewnętrznymi serwerami, zanim na to zezwolisz.
- 4Eksport jako .md lub samodzielny .htmlKopiowanie lub pobieranie Markdown zapisuje surowy tekst źródłowy. Pobranie HTML opakowuje oczyszczony wynik w samodzielny dokument z własnym arkuszem stylów inline — klasy Tailwind działają tylko w obrębie witryny, więc eksport zawiera zwykłe reguły CSS, dzięki czemu plik da się czytać wszędzie.
Powiązane narzędzia
Konwerter HTML do Markdown
Konwertuj HTML na czysty Markdown. Obsługuje nagłówki, listy, linki, obrazy, bloki kodu, tabele i cytaty. Idealny do przenoszenia treści z systemów CMS.
Wypróbuj
Konwerter Markdown do HTML
Konwertuj Markdown do czystego HTML z podglądem na żywo. Użyj widoku źródłowego, aby skopiować gotowy do wklejenia HTML dla blogów, systemów CMS lub szablonów e-mail.
Wypróbuj
Edytor diagramów Mermaid
Twórz schematy blokowe, diagramy sekwencji, wykresy Gantta i inne w składni Mermaid z podglądem na żywo. Eksportuj jako SVG lub PNG. Działa całkowicie w Twojej przeglądarce.
Wypróbuj