📝
Gratis Markdown-editor
Schrijf en bekijk een voorvertoning van Markdown in realtime. Ondersteunt koppen, vet, cursief, codeblokken, tabellen en lijsten.
Werkt offline na het laden
92 woorden · 587 tekens
Markdown
Voorvertoning
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Welkom in de Markdown-editor</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Schrijf <strong>Markdown</strong> aan de linkerkant, zie de live preview aan de rechterkant.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Functies</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>Vet</strong>, <em>cursief</em> en <del>doorgestreept</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">Inline code</code> en omheinde codeblokken</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">Links</a></li><li class="my-0.5">Lijsten, citaatblokken, tabellen en meer</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Codevoorbeeld</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 is in 2004 door John Gruber gemaakt om schrijven voor het web gemakkelijker te maken.</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">Functie</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">Ondersteund</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Koppen</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">Lijsten</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">Tabellen</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">Code</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown-spiekbriefje
# Heading 1H1
**bold**Vet
*italic*Cursief
`code`Inline code
- itemLijst met opsommingstekens
1. itemGenummerde lijst
> quoteBlokcitaat
[text](url)Koppeling
Afbeelding
---Scheidingslijn
Veelvoorkomend gebruik
- Schrijf API Documentatie in MarkdownConceptendpuntbeschrijvingen, verzoek-/antwoordvoorbeelden en parametertabellen in Markdown.
- Maak Aantekeningen in MarkdownSchrijf gestructureerde aantekeningen in Markdown die in Notion, Obsidian, Bear of elke Markdown-app kunnen worden geplakt.
- Schrijf GitHub README in MarkdownMaak een concept en bekijk een voorbeeld van je GitHub-repository README met live Markdown-rendering.
- Schrijf Technische DocumentatieSchrijf en bekijk API-documenten, wiki's en technische gidsen in Markdown voor publicatie.
- Schrijf Blogberichten in MarkdownMaak blogberichten in Markdown voor Ghost, Jekyll, Hugo, Hashnode en andere op Markdown gebaseerde publicatieplatformen.
Hoe het werkt
Het voorbeeld wordt weergegeven door een zelfgeschreven Markdown-parser die direct in de tool zit — geen marked, geen remark, geen externe bibliotheek. Hij tokeniseert de bron regel voor regel in de browser en zet de syntaxis om in HTML, die vóór weergave door een sanitizer gaat.
- 1Tokenisatie regel voor regelDe eigen functie renderMarkdown splitst je bron op nieuwe regels en loopt ze in één doorgang af, waarbij codeblokken, koppen (H1–H6), citaatblokken, genummerde en ongenummerde lijsten, GFM-tabellen (met kolomuitlijning), horizontale lijnen en alinea's op volgorde van prioriteit worden herkend.
- 2Inline syntaxis uitwerkenElke verzamelde regel of cel wordt daarna verwerkt door inlineMarkdown, een reeks regexvervangingen voor vet (** en __), cursief (* en _), vet-cursief (***), doorgehaald (~~), inline code (), afbeeldingen () en links ([text](url)) — afbeeldingen worden vóór links verwerkt, zodat het !-voorvoegsel niet verkeerd wordt opgeslokt.
- 3Opschonen en externe bronnen blokkerenDe ruwe HTML van de renderer gaat door een sanitizer (sanitize-html) om onveilige tags en attributen zoals <script>, onerror-handlers en javascript:-hrefs te verwijderen. Een tweede doorgang (neutralizeRemote) vervangt externe src-waarden van afbeeldingen standaard door plaatshouders, zodat het voorbeeld niet stilletjes contact legt met externe servers voordat je daarvoor kiest.
- 4Exporteren als .md of zelfstandige .htmlMarkdown kopiëren of downloaden schrijft de ruwe brontekst. HTML downloaden verpakt de opgeschoonde uitvoer in een zelfstandig document met een eigen inline stylesheet — Tailwind-klassen werken alleen binnen de site, dus de export bevat in plaats daarvan gewone CSS-regels, zodat het bestand overal leesbaar is.
Gerelateerde tools
HTML naar Markdown-converter
Converteer HTML naar schone Markdown. Verwerkt koppen, lijsten, koppelingen, afbeeldingen, codeblokken, tabellen en citaatblokken. Perfect voor het migreren van inhoud uit CMS'en.
Probeer het
Markdown naar HTML-converter
Converteer Markdown naar schone HTML met livevoorvertoning. Gebruik de bronweergave om kant-en-klare HTML te kopiëren voor blogs, CMS'en of e-mailsjablonen.
Probeer het
Mermaid-diagrameditor
Schrijf stroomdiagrammen, reeksdiagrammen, Gantt-diagrammen en meer in Mermaid-syntaxis met een livevoorvertoning. Exporteer als SVG of PNG. Volledig in je browser.
Probeer het