📝
Markdown uređivač — besplatno
Pišite i pregledajte Markdown u stvarnom vremenu. Podržava naslove, podebljano, kurziv, blokove koda, tablice i popise.
Radi offline nakon učitavanja
97 riječi · 586 znakova
Markdown
Pregled
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Dobrodošao u Markdown Editor</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Napiši <strong>Markdown</strong> s lijeve strane, vidi pregled u realnom vremenu s desne strane.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Značajke</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>Podebljano</strong>, <em>kurziv</em>, i <del>precrtano</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">Ugrađeni kod</code> i blokovi koda s ogradama</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">Veze</a></li><li class="my-0.5">Popisi, blokovi navodnika, tablice i još mnogo toga</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Primjer koda</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 je 2004. godine stvorio John Gruber kako bi pisanje za web bilo lakše.</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">Značajka</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">Podržano</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Naslovi</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">Popisi</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">Tablice</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>
Markdown vodič
# Heading 1H1
**bold**Podebljano
*italic*Kurziv
`code`Inline kod
- itemPopis s točkama
1. itemNumerirani popis
> quoteBlok citat
[text](url)Veza
Slika
---Razdjelnik
Uobičajene namjene
- Napišite API dokumentaciju u Markdown-uSkicirajte opise krajnjih točaka, primjere zahtjeva/odgovora i tablice parametara u Markdown-u.
- Vodite Markdown bilješkeNapišite strukturirane bilješke u Markdown-u koje mogu biti zalijepljene u Notion, Obsidian, Bear ili bilo koju Markdown aplikaciju.
- Napišite GitHub README u Markdown-uNacrtajte i pregledajte svoje GitHub spremište README sa živo prikazanim Markdown-om.
- Napišite tehničku dokumentacijuNapišite i pregledajte dokumentaciju API-ja, wiki i tehničke vodiče u Markdown-u prije objavljivanja.
- Napišite blog članke u Markdown-uNacrtajte blog članke u Markdown-u za Ghost, Jekyll, Hugo, Hashnode i druge Markdown platforme za objavljivanje.
Kako funkcionira
Pregled renderira ručno napisani Markdown parser ugrađen izravno u alat — bez marked, bez remark, bez vanjske biblioteke. Tokenizira izvor redak po redak u pregledniku, pretvarajući sintaksu u HTML koji zatim prolazi kroz sanitizator prije prikaza.
- 1Tokenizacija redak po redakPrilagođena funkcija renderMarkdown dijeli vaš izvor po novim redovima i prolazi kroz njih u jednom prolazu, podudarajući ograđene blokove koda, naslove (H1–H6), citate, uređene i neuređene popise, GFM tablice (s poravnanjem stupaca), vodoravne crte i odlomke prioritetnim redoslijedom.
- 2Proširivanje ugrađene sintakseSvaki prikupljeni redak ili ćelija zatim se obrađuje pomoću inlineMarkdown, lanca zamjena regexom koji obrađuje podebljano (** i __), kurziv (* i _), podebljano-kurzivno (***), precrtano (~~), ugrađeni kod, slike () i poveznice ([text](url)) — slike se razrješavaju prije poveznica tako da se prefiks ! ne konzumira pogrešno.
- 3Sanitizacija i blokiranje udaljenih resursaSirovi HTML koji proizvede renderer prolazi kroz sanitizator (sanitize-html) za uklanjanje nesigurnih oznaka i atributa poput <script>, onerror rukovatelja i javascript: hrefova. Drugi prolaz (neutralizeRemote) po zadanom zamjenjuje udaljene src vrijednosti slika čuvarima mjesta, sprječavajući da pregled tiho kontaktira vanjske poslužitelje prije nego što se za to odlučite.
- 4Izvoz kao .md ili samostalni .htmlKopiranje ili preuzimanje Markdowna zapisuje sirovi izvorni tekst. Preuzimanje HTML-a omata sanitizirani izlaz u samostalni dokument s vlastitim ugrađenim stylesheetom — Tailwind klase rade samo unutar stranice, pa izvoz umjesto toga pakira obična CSS pravila, čineći datoteku čitljivom bilo gdje.
Srodni alati
HTML u Markdown pretvarač
Pretvorite HTML u čisti Markdown. Obrađuje naslove, popise, veze, slike, blokove koda, tablice i blokove navoda. Savršeno za premještanje sadržaja iz CMS-ova.
Isprobajte
Markdown u HTML pretvarač
Pretvorite Markdown u čisti HTML s živim pregledom. Koristite prikaz izvora za kopiranje HTML-a spreman za lijepljenje za blogove, CMS-ove ili e-mail predloške.
Isprobajte
Mermaid uređivač dijagrama
Pišite dijagrame toka, sekvencijalne dijagrame, Ganttove grafikone i više u Mermaid sintaksi s živim pregledom. Izvezite kao SVG ili PNG. Radi u potpunosti u vašem pregledniku.
Isprobajte