📝
Markdowni redaktor tasuta
Kirjuta ja vaata Markdowni reaalajas. Toetab pealkirju, pakskirja, kursiivsust, koodiplokke, tabeleid ja loendeid.
Töötab võrguühenduseta pärast laadimist
82 sõna · 583 tähemärki
Markdown
Eelvaade
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Tere tulemast Markdown'i redaktorisse</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Kirjuta <strong>Markdown</strong> vasakul, näe otseülekande eelvaadet paremal.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Funktsioonid</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>Rasvane</strong>, <em>kaldkiri</em> ja <del>läbijoonitud</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">Tekstisisene kood</code> ja kodalohkode</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">Lingid</a></li><li class="my-0.5">Nimekirjad, jututsitaadid, tabelid ja palju muud</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Koodinäide</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 lõi John Gruber 2004. aastal, et muuta veebis kirjutamine lihtsamaks.</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">Funktsioon</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">Toetatud</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Pealkirjad</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">Nimekirjad</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">Tabelid</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">Kood</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown-i spikker
# Heading 1H1
**bold**Rasvane
*italic*Kaldkiri
`code`Rea-sisene kood
- itemTäpploend
1. itemNummerdatud loend
> quoteBlokktsitaat
[text](url)Link
Pilt
---Eraldaja
Levinud kasutusviisid
- Kirjutage API dokumentatsioon MarkdownisSkitseerige lõppunktide kirjeldused, taotlus-/vastusenaabrid ja parameetrite tabelid Markdownis.
- Võtke Markdownis märkmeidKirjutage struktureeritud märkmeid Markdownis, mida saab kleepida Notioni, Obsidiani, Beari või mistahes Markdowni rakendusesse.
- Kirjutage GitHub README MarkdownisKoostage ja vaadake eelnevalt oma GitHub hoidla README-t reaalajas Markdowni renderdamisega.
- Kirjutage tehniline dokumentatsioonKirjutage ja vaadake eelnevalt API dokumentatsiooni, viikasid ja tehnikajihe Markdownis enne avaldamist.
- Kirjutage ajaveebis postitusi MarkdownisKoostage ajaveebis postitusi Markdownis Ghost'le, Jekyll'ile, Hugo'le, Hashnode'le ja muudele Markdowni avaldamisplatvormidele.
Kuidas see töötab
Eelvaate renderdab käsitsi kirjutatud Markdown-parser, mis on integreeritud otse tööriistale — marked'i, remark'i ega välist teeki pole. See tokeniseerib allika rea kaupa brauseris, teisendades süntaksi HTML-iks, mis seejärel läbib sanitiseerija enne kuvamist.
- 1Rea-kaupa tokeniseerimineKohandatud funktsioon renderMarkdown jagab sinu allika reavahetuste alusel ja käib neid läbi ühe läbimisega, sobitades piirdega koodiplokke, pealkirju (H1–H6), tsitaate, järjestatud ja järjestamata loendeid, GFM-tabeleid (veeru-joondusega), horisontaalseid jooni ja lõike prioriteetjärjekorras.
- 2Reasisese süntaksi laiendamineIga kogutud rida või lahtrit töötleb seejärel inlineMarkdown, regulaaravaldise asenduste kett, mis käsitleb rasvane kiri (** ja __), kaldkiri (* ja _), rasvane-kald (***), läbikriipsutus (~~), reasisene kood (), pildid () ja lingid ([tekst](url)) — pildid lahendatakse enne linke, et ! eesliidet ei tarbitaks valesti.
- 3Sanitiseerimine ja kaugallikate blokeerimineRenderdaja toodetud toores HTML läbib sanitiseerija (sanitize-html), et eemaldada ohtlikud sildid ja atribuudid nagu <script>, onerror käsitlejad ja javascript: hrefid. Teine läbimine (neutralizeRemote) asendab kauged pildi src väärtused vaikimisi tähistajatega, takistades eelvaatel vaikselt helistamast välistele serveritele enne, kui sa selle lubad.
- 4Ekspordi .md-na või iseseisva .html-inaMarkdown'i kopeerimine või allalaadimine kirjutab toorese lähteteksti. HTML allalaadimine mähib sanitiseeritud väljundi iseseisvasse dokumenti oma reasisese stiililehega — Tailwindi klassid töötavad ainult sisemiselt saidil, seega eksport sisaldab selle asemel tavalisi CSS-reegleid, muutes faili loetavaks igal pool.
Seotud tööriistad
HTML Markdowni konverter
Teisenda HTML puhtaks Markdowniks. Käsitleb pealkirju, loendeid, linke, pilte, koodiplokke, tabeleid ja tsitaatplokke. Ideaalne sisu CMS-idest väljaviimiseks.
Proovi järele
Markdown HTML-i konverter
Teisenda Markdown puhtaks HTML-iks reaalajas eelvaatega. Kasuta lähtevaateid koheselt kleepitava HTML-i kopeerimiseks blogide, CMS-ide või e-posti mallide jaoks.
Proovi järele
Mermaid-diagrammi redaktor
Kirjuta vooskeeme, järjestusdiagramme, Gantti graafikuid ja muud Mermaid-süntaksis reaalajas eelvaatega. Ekspordi SVG- või PNG-vormingus. Töötab täielikult sinu brauseris.
Proovi järele