📝
Markdown-editori ilmaiseksi
Kirjoita ja esikatsele Markdownia reaaliajassa. Tukee otsikoita, lihavointia, kursiivia, koodilohkoja, taulukoita ja listoja.
Toimii offline-tilassa kerran ladattuna
79 sanaa · 587 merkkiä
Markdown
Esikatselu
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Tervetuloa Markdown-editoriin</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Kirjoita <strong>Markdown</strong> vasemmalle, katso reaaliaikainen esikatselu oikealle.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Ominaisuudet</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>Lihavointi</strong>, <em>kursiivi</em> ja <del>yliviivaus</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">Rivinumeroitu koodi</code> ja koodilohkot</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">Linkit</a></li><li class="my-0.5">Listat, lainaukset, taulukot ja paljon muuta</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Koodiesimerkki</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">John Gruber loi Markdownin vuonna 2004 tekemään verkkoon kirjoittamisesta helpompaa.</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">Ominaisuus</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">Tuettu</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Otsikot</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">Listat</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">Taulukot</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">Koodi</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown-pikaopas
# Heading 1H1
**bold**Lihavoitu
*italic*Kursiivi
`code`Inline-koodi
- itemLuettelo
1. itemNumeroitu luettelo
> quoteLainauslohko
[text](url)Linkki
Kuva
---Erotinviiva
Yleiset käyttötavat
- Kirjoita API-dokumentaatio MarkdownissaLaadi päätepisteen kuvaukset, pyyntö-/vastausesimerkit ja parametritaulukot Markdownissa.
- Ota Muistiinpanoja MarkdownissaKirjoita strukturoituja muistiinpanoja Markdownissa, jotka voidaan liittää Notioniin, Obsidianiin, Beariin tai mihin tahansa Markdown-sovellukseen.
- Kirjoita GitHub README MarkdownissaLuonnostele ja esikatsele GitHub-arkistosi README:tä live Markdown-renderöinnillä.
- Kirjoita Teknistä DokumentaatiotaKirjoita ja esikatsele API-dokumentaatiota, wiki-sivuja ja teknisiä oppaita Markdownissa ennen julkaisemista.
- Kirjoita Blogipptuja MarkdownissaLuonnostele blogipostauksia Markdownissa Ghost-, Jekyll-, Hugo-, Hashnode- ja muille Markdown-pohjaisille julkaisualustoille.
Miten se toimii
Esikatselu piirretään käsin kirjoitetulla Markdown-jäsentimellä, joka on rakennettu suoraan työkaluun — ei marked-kirjastoa, ei remark-kirjastoa, ei ulkoista kirjastoa. Se tokenisoi lähteen rivi kerrallaan selaimessa, muuntaen syntaksin HTML:ksi, joka sitten ohjataan puhdistimen läpi ennen näyttämistä.
- 1Rivi riviltä -tokenisointiMukautettu renderMarkdown-funktio jakaa lähteesi rivinvaihdoista ja käy niitä läpi yhdellä läpikäynnillä, täsmäten eristettyjä koodilohkoja, otsikoita (H1–H6), lainauksia, järjestettyjä ja järjestämättömiä listoja, GFM-taulukoita (sarakkeiden tasauksella), vaakaviivoja ja kappaleita etusijajärjestyksessä.
- 2Inline-syntaksin laajennusJokainen kerätty rivi tai solu käsitellään sitten inlineMarkdown-funktiolla, ketjulla regex-korvauksia, joka käsittelee lihavoinnin (** ja __), kursiivin (* ja _), lihavan-kursiivin (***), yliviivauksen (~~), inline-koodin, kuvat () ja linkit ([teksti](url)) — kuvat ratkaistaan ennen linkkejä, jotta !-etuliitettä ei tulkita väärin.
- 3Puhdistus ja etäresurssien estoPiirtäjän tuottama raaka HTML ohjataan puhdistimen (sanitize-html) läpi poistaakseen turvattomat tagit ja attribuutit kuten <script>, onerror-käsittelijät ja javascript:-hrefit. Toinen läpikäynti (neutralizeRemote) korvaa etäkuvien src-arvot sijaismerkeillä oletuksena, estäen esikatselua hiljaa ottamasta yhteyttä ulkoisiin palvelimiin ennen kuin hyväksyt sen.
- 4Vie .md- tai itsenäisenä .html-tiedostonaMarkdownin kopiointi tai lataus kirjoittaa raa'an lähdetekstin. HTML:n lataus kääri puhdistetun tulosteen itsenäiseen dokumenttiin, jolla on oma inline-tyylitiedostonsa — Tailwind-luokat toimivat vain sivuston sisällä, joten vienti niputtaa sen sijaan tavallisia CSS-sääntöjä, tehden tiedostosta luettavan missä tahansa.
Liittyvät työkalut
HTML–Markdown-muunnin
Muunna HTML siistiksi Markdowniksi. Käsittelee otsikoita, listoja, linkkejä, kuvia, koodilohkoja, taulukoita ja lainauslohkoja. Täydellinen sisällön siirtämiseen CMS-järjestelmistä.
Kokeile sitä
Markdown–HTML-muunnin
Muunna Markdown siistiksi HTML:ksi reaaliaikaisella esikatselulla. Käytä lähdekoodinäkymää kopioidaksesi valmiin HTML:n blogeihin, CMS-järjestelmiin tai sähköpostimalleihin.
Kokeile sitä
Mermaid-kaavioeditori
Kirjoita vuokaavioita, sekvenssidiagrammeja, Gantt-kaavioita ja muuta Mermaid-syntaksilla reaaliaikaisella esikatselulla. Vie SVG- tai PNG-muotoon. Toimii kokonaan selaimessasi.
Kokeile sitä