Markdown naar HTML omzetter
Zet Markdown om naar HTML in je browser — volledige GitHub Flavored Markdown, live voorbeeld, syntaxismarkering. Exporteer een HTML-fragment, volledig document of e-mailveilige inline-HTML. 100% privé, geen upload.
Aangepaste CSS
Wat is Markdown naar HTML-conversie?
Markdown naar HTML-conversie zet een platte-tekstdocument geschreven in Markdown — met `#` voor koppen, `**vet**`, `- ` voor lijsten en `[tekst](url)` voor links — om in de HTML die browsers, contentmanagementsystemen en e-mailclients daadwerkelijk weergeven. Markdown is ontworpen om leesbaar te zijn zoals het is en eenvoudig te schrijven, maar een browser begrijpt `# Kop` niet; hij begrijpt <h1>Kop</h1>. Conversie overbrugt dat gat.
Onder de motorkap parseert een Markdown-processor je bron eerst in een abstracte syntaxisboom (AST) — een gestructureerde weergave waarin een kop, een alinea, een lijst en een code block afzonderlijke knopen zijn met hun inhoud en attributen. Vervolgens serialiseert hij die boom naar HTML, waarbij de juiste tags en nesting worden uitgegeven. Werken via een AST, in plaats van tekst te vervangen met reguliere expressies, is wat de omzetter in staat stelt geneste lijsten, tabellen en ingesloten HTML correct en voorspelbaar te verwerken. De twee erkende grammatica's zijn CommonMark, de precieze standaard, en GitHub Flavored Markdown (GFM), die deze uitbreidt met tabellen, takenlijsten, doorhalingen en autolinks.
De reden dat je überhaupt omzet, is dat vrijwel elke publicatiebestemming HTML wil, geen Markdown. Een statische-sitegenerator, een CMS-rijketekstveld, een e-mailsjabloon en een browsertabblad renderen allemaal HTML. Dus de typische workflow is om in comfortabele Markdown te schrijven — een README, documentatie, een blogconcept, notities — en om te zetten naar HTML op het moment van publiceren. Deze tool doet die conversie lokaal en toont een live voorbeeld, zodat je het gerenderde resultaat ziet en de exacte HTML kunt kopiëren in de vorm die je nodig hebt: een fragment, een volledige pagina of e-mailklare inline-gestylede opmaak.
De omgekeerde bewerking — HTML terug naar Markdown — is even nuttig wanneer je bestaande webinhoud naar een op Markdown gebaseerd systeem migreert. Schakel daarvoor naar het tabblad HTML → Markdown of open de speciale HTML naar Markdown omzetter.
Markdown in:
# Release Notes
We shipped **tables** and `code`:
| Feature | Status |
| ------- | ------ |
| GFM | Done |
- [x] Parse to an AST
- [ ] Profit
HTML out:
<h1>Release Notes</h1>
<p>We shipped <strong>tables</strong> and <code>code</code>:</p>
<table>
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
<tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
<li class="task-list-item"><input type="checkbox" disabled> Profit</li>
</ul> Belangrijkste functies
Live gesplitst-paneel voorbeeld
Typ Markdown links en zie het rechts in realtime renderen, terwijl de HTML-uitvoer eronder opbouwt terwijl je gaat. Het voorbeeld rendert in een sandboxed iframe, dus wat je ziet is wat een browser zal tonen — en geplakte scripts kunnen niet draaien.
Volledige GitHub Flavored Markdown
Niet alleen CommonMark — de volledige GFM-superset: pijptabellen, takenlijsten (`- [x]`), doorhalingen (`~~`), geautolinkte URL's en fenced code blocks. Een README of issue geschreven voor GitHub rendert hier precies zoals daar.
Syntaxismarkering
Label een fenced code block met zijn taal (```js, ```python, ```sql) en de omzetter markeert het, waarbij tokens in spans worden verpakt met een taalklasse op het <code>-element. Combineer met een markeringsstijlblad op je pagina voor kleur.
Drie uitvoerformaten
Exporteer een HTML-fragment (body-opmaak voor een sjabloon of CMS), een Volledig document (een zelfstandige -pagina die je als .html kunt bewaren), of E-mail inline-HTML met stijlen op elk element verplaatst zodat Outlook en andere clients het correct renderen.
Paneel voor aangepaste CSS
Injecteer je eigen CSS in het live voorbeeld om de typografie van een site te evenaren of GitHub's README-styling na te bootsen. Typ regels zoals h1 { color: #0969da; } en het voorbeeld werkt direct bij, zonder de schone HTML die je eruit kopieert aan te raken.
GFM-syntaxisspiekbriefje
Een snelle referentie voor de syntaxis die HTML produceert: `# H1` → kop, `**vet**` → <strong>, `*cursief*` → <em>, `- item` → lijst, `1. item` → geordende lijst, `[tekst](url)` → link, `` `code` `` → inline code, ` ```taal ` → fenced code, `> citaat` → blockquote, `| a | b |` → tabel, `- [ ]` → takenlijst, `~~tekst~~` → doorhaling.
100% privé, in de browser
Elke conversie verloopt lokaal met JavaScript — je Markdown en HTML verlaten je apparaat nooit, raken nooit een server en werken offline nadat de pagina is geladen. Veilig voor ongepubliceerde docs, interne README's en releasenotes onder embargo.
Voorbeelden
GFM-tabel naar een HTML <table>
| Tool | Snelheid | | ---- | -------- | | GFM | Snel |
<table> <thead><tr><th>Tool</th><th>Snelheid</th></tr></thead> <tbody><tr><td>GFM</td><td>Snel</td></tr></tbody> </table>
GitHub Flavored Markdown-pijptabellen maken geen deel uit van gewoon CommonMark, maar deze omzetter begrijpt ze en geeft een correcte semantische <table> met <thead> en <tbody> — klaar om te stylen of in een CMS te plaatsen.
Takenlijst naar checkbox-HTML
- [x] Schrijf de README - [ ] Zet hem om naar HTML
<ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Schrijf de README</li> <li class="task-list-item"><input type="checkbox" disabled> Zet hem om naar HTML</li> </ul>
De GFM-takenlijstsyntaxis `- [x]` / `- [ ]` wordt echte uitgeschakelde checkbox-invoervelden, precies zoals GitHub een checklist rendert — zodat een gekopieerde README er op je eigen pagina hetzelfde uitziet.
Fenced code block naar gemarkeerde <pre><code>
```js const html = md.render(src) ```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src) </code></pre>
Voeg een taal toe na de openende fence en de omzetter past syntaxismarkering toe, waarbij tokens in spans worden verpakt met een language-js-klasse op het <code>-element. Combineer het met een markeringsstijlblad en de code wordt ingekleurd.
Een README naar een volledig HTML-document
# Mijn Project Een korte beschrijving en een [link](https://example.com).
<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>Mijn Project</title></head> <body> <h1>Mijn Project</h1> <p>Een korte beschrijving en een <a href="https://example.com">link</a>.</p> </body> </html>
Schakel de uitvoer naar Volledig document en de omzetter verpakt de gerenderde HTML in een complete -pagina met een <head> en charset — een zelfstandig .html-bestand dat je in elke browser kunt openen of direct kunt downloaden.
Markdown naar HTML omzetten
- 1
Typ of plak je Markdown
Zet je Markdown — een README, releasenotes, een issue-tekst — in het invoerveld. Volledige GitHub Flavored Markdown wordt ondersteund: tabellen, takenlijsten, doorhalingen, autolinks en fenced code blocks. Het live voorbeeld en de HTML-uitvoer worden bijgewerkt terwijl je typt, allemaal in je browser.
- 2
Kies een uitvoerformaat
Kies HTML-fragment om in een sjabloon of CMS te plakken, Volledig document voor een zelfstandige .html-pagina, of E-mail inline voor inline-gestylede HTML die Outlook overleeft. Voeg taallabels toe aan code-fences voor syntaxismarkering, en gebruik het paneel Aangepaste CSS om het voorbeeld te stylen.
- 3
Kopieer of download
Klik op Kopiëren om de HTML te pakken, of op Downloaden om het als bestand te bewaren. Om de conversie om te keren, schakel je naar het tabblad HTML → Markdown en plak je je HTML om schone Markdown terug te krijgen.
Veelvoorkomende valkuilen
Niet-geëscapete HTML ingeslikt in proza
Markdown laat ruwe HTML door, dus een punthaak die je als tekst bedoelde — zoals schrijven over een <Component> of een generieke List<T> — wordt geparseerd als een HTML-tag en verdwijnt uit de uitvoer. Escape de punthaak met een backslash of een HTML-entiteit, of verpak de tekst in een code-span zodat deze letterlijk wordt gerenderd.
Use the <Header> component to wrap pages. <!-- <Header> is parsed as a tag and vanishes -->
Use the `<Header>` component to wrap pages. <!-- backticks keep it literal: renders <Header> -->
Verkeerd uitgelijnde of misvormde tabelpijpen
Een GFM-tabel heeft een koprij nodig, een scheidingsrij van streepjes en ten minste één pijp per rij. Het vergeten van de scheidingsrij, of een ander aantal kolommen dan de kop, breekt de tabel — hij valt terug op een gewone alinea van pijpen. De cellen hoeven niet visueel uitgelijnd te zijn, maar elke rij moet hetzelfde aantal kolommen hebben.
| Name | Role | | Alice | Admin | <!-- no |---|---| delimiter row: not a table -->
| Name | Role | | ---- | ---- | | Alice | Admin | <!-- delimiter row present: renders a table -->
Code-fence zonder een taal
Een fenced code block zonder taal-infostring rendert als een <pre><code>-blok zonder taalklasse, dus krijgt het geen syntaxismarkering. De code verschijnt nog steeds, alleen monochroom. Voeg de taal direct na de openende backticks toe om markering in te schakelen; een spatie tussen de backticks en de naam schakelt het uit.
``` const x = 1 ``` <!-- no language → no highlighting -->
```js const x = 1 ``` <!-- language-js → highlighted -->
Een fragment gebruiken waar een volledig document nodig is
De HTML-fragmentuitvoer kopiëren en direct als een .html-bestand bewaren produceert een pagina zonder doctype, zonder charset en zonder <html>/<head>/<body>. Browsers renderen het vaak toch, maar quirks-modus en een ontbrekende charset kunnen accenttekens en lay-out breken. Wanneer de HTML op zichzelf moet staan, schakel naar het formaat Volledig document.
<h1>Title</h1> <p>Saved as page.html — no doctype, no charset.</p>
<!doctype html> <html lang="en"><head><meta charset="utf-8"><title>Title</title></head> <body><h1>Title</h1><p>Complete, standalone page.</p></body></html>
Veelvoorkomende toepassingen
- Publiceren naar een statische site of CMS
- Schrijf je inhoud in Markdown, zet om naar een HTML-fragment en plak het in een statische-site-sjabloon of een CMS-rijketekstveld. Je krijgt schone semantische opmaak — koppen, lijsten, tabellen — zonder dat de paginawrapper in de weg zit.
- Een README bekijken vóór je pusht
- Plak je README.md en zie het live voorbeeld het renderen met volledige GFM — tabellen, takenlijsten, fenced code — zodat je een kapotte tabel of een ontbrekende code-fence opvangt vóór de commit, niet nadat GitHub het aan de wereld toont.
- Notities omzetten naar een deelbare webpagina
- Vergadernotities, een ontwerpdocument of een concept geschreven in Markdown wordt met één klik een complete HTML-pagina. Kies Volledig document, download het .html-bestand, en je hebt iets dat je in elke browser kunt openen of overal kunt hosten.
- E-mailveilige inline-gestylede HTML bouwen
- E-mailclients verwijderen <style>-blokken, dus schrijf je bericht in Markdown en exporteer het formaat E-mail inline, dat CSS op elk element als style-attribuut plaatst. Het resultaat rendert correct in Outlook en andere clients die stijlen op documentniveau negeren.
- Een .md-bestand omzetten naar een downloadbaar .html
- Heb je een offline, zelfstandige HTML-versie van een Markdown-document nodig? Plak het, kies Volledig document en Downloaden — je krijgt een zelfstandig .html-bestand met een correcte doctype en charset, zonder buildtool of opdrachtregel.
- Gerenderde docs insluiten in een app
- Genereer je documentatie, changelogs of helpinhoud uit Markdown opgeslagen in je repo? Gebruik deze tool om precies te zien welke HTML een gegeven Markdown-bron produceert, zodat je de renderer van je app kunt evenaren en de uitvoer kunt stylen om te passen.
Technische details
- CommonMark versus GitHub Flavored Markdown
- CommonMark is de strikte, ondubbelzinnige Markdown-specificatie die exact definieert hoe koppen, nadruk, lijsten, links en code blocks parseren. GitHub Flavored Markdown (GFM) is een strikte superset: het behoudt alles wat CommonMark definieert en voegt vier uitbreidingen toe — pijptabellen, takenlijstitems (`- [x]`), doorhalingen (`~~tekst~~`) en geautolinkte kale URL's. Omdat GFM alleen functies toevoegt, is elk geldig CommonMark-document ook geldig GFM. Deze omzetter implementeert de GFM-superset, zodat documenten geschreven voor beide grammatica's correct renderen.
- XSS-veilige sandboxed weergave
- Markdown staat opzettelijk ingesloten ruwe HTML toe, wat betekent dat een Markdown-document een <script>-tag of een event-handler zoals onerror kan bevatten. Het live voorbeeld verdedigt hiertegen door te renderen binnen een <iframe sandbox=""> met scripting uitgeschakeld, zodat actieve inhoud in je invoer niet kan draaien terwijl je het bekijkt — belangrijk wanneer je Markdown uit een niet-vertrouwde bron omzet. De geserialiseerde HTML die de tool uitvoert is de getrouwe weergave van je invoer; als je van plan bent HTML te publiceren die is afgeleid van niet-vertrouwde Markdown, haal het dan door een saneerprogramma zoals DOMPurify op je server vóór je het serveert.
- Compatibiliteit met e-mail-HTML
- HTML-e-mail wordt gerenderd door een lappendeken van engines met berucht beperkte CSS-ondersteuning. Outlook op Windows gebruikt de renderengine van Word en negeert <style>-blokken in de documentkop, zodat elke op klassen gebaseerde styling stilletjes verdwijnt; de betrouwbare aanpak is inline style-attributen op elk element, wat de uitvoer E-mail inline produceert. Afbeeldingen zijn een andere valkuil: veel clients blokkeren externe afbeeldingen totdat de ontvanger zich aanmeldt, dus kleine afbeeldingen insluiten als data-URI's rendert ze direct, terwijl grote externe afbeeldingen mogelijk helemaal niet verschijnen. Houd de opmaak eenvoudig en test op je doel-clients.
- Synchrone in-browser markering
- Wanneer een fenced code block een taal-infostring draagt (```js), draait de omzetter een synchrone markeerder over de inhoud, tokeniseert de bron en verpakt elk token in een <span> met een klasse zoals hljs-keyword of hljs-string, plus een language-js-klasse op het <code>-element. De markering is alleen structureel — het voegt klassen toe, geen kleuren — dus de doelpagina heeft een bijpassend markeringsstijlblad nodig om het palet te renderen. Omdat het synchroon in de browser draait, verschijnt de gemarkeerde HTML op het moment dat je typt, zonder netwerkaanroep.
Aanbevolen werkwijzen
- Kies het uitvoerformaat voor de bestemming
- Stem het formaat af op waar de HTML naartoe gaat. Een CMS-veld of sjabloon heeft al een paginawrapper, dus plak een HTML-fragment. Een bestand dat je rechtstreeks in een browser wilt openen heeft een Volledig document met doctype en charset nodig. Een e-mail heeft E-mail inline nodig zodat de stijlen clients overleven die <style>-blokken verwijderen. De verkeerde vorm plakken is de meest vermijdbare fout.
- Label code-fences altijd met een taal
- Schrijf de taal direct na de openende backticks — ```js, ```python, ```sql — zonder spatie, zodat de omzetter het blok kan markeren en de juiste taalklasse kan toevoegen. Een kale fence produceert ongestylede, niet-gemarkeerde code. Gebruik een taal die de markeerder herkent; een onbekende of verkeerd gespelde naam valt terug op platte tekst.
- Saneer vóór het publiceren van niet-vertrouwde Markdown
- Het voorbeeld is sandboxed, maar de HTML die de tool uitgeeft is een getrouwe weergave — inclusief eventuele ruwe HTML of <script> in de invoer. Als die Markdown van gebruikers of een andere niet-vertrouwde bron komt en je van plan bent het resultaat aan andere mensen te serveren, haal de HTML dan eerst door een saneerprogramma zoals DOMPurify op je server. De sandbox beschermt jou tijdens het omzetten, niet je bezoekers nadat je publiceert.
- Houd e-mail-HTML eenvoudig en inline
- Geef voor e-mail de voorkeur aan het formaat E-mail inline, houd je lay-out eenvoudig en vermijd CSS-functies die Outlook en andere clients laten vallen. Sluit kleine afbeeldingen in als data-URI's zodat ze renderen zelfs wanneer externe afbeeldingen worden geblokkeerd, en stuur jezelf altijd een test vóór een bredere verzending — e-mailweergave is het minst vergevingsgezinde doel dat HTML heeft.
- Escape letterlijke HTML-tekens in tekst
- Als je wilt dat een letterlijke < of & als tekst verschijnt in plaats van als een tag of entiteit te worden geïnterpreteerd, escape het dan met een backslash (\<) of een HTML-entiteit (<). Markdown laat ruwe HTML door, dus een niet-geëscapete <voorbeeld> in proza kan worden ingeslikt als een onbekende tag en uit de gerenderde uitvoer verdwijnen.
Veelgestelde vragen
Ondersteunt het GitHub Flavored Markdown (GFM)?
Hoe krijg ik e-mailveilige inline-gestylede HTML?
Wat is het verschil tussen een HTML-fragment en een volledig document?
Is de gerenderde HTML XSS-veilig om te bekijken?
Kan ik mijn eigen CSS aan het voorbeeld toevoegen?
Worden mijn bestanden of tekst naar een server geüpload?
Werkt het offline?
Hoe zet ik een Markdown-bestand (.md) om naar een HTML-bestand?
Waarom wordt mijn code block niet gemarkeerd?
Kan ik HTML terug omzetten naar Markdown?
Gerelateerde tools
Alle tools bekijken →Base64 decoderen en encoderen online
Encodering en formattering
Base64 decoderen en encoderen direct in je browser. Realtime conversie met volledige UTF-8- en emoji-ondersteuning. 100% privé — geen account nodig.
Base64 naar afbeelding converter
Encodering en formattering
Decodeer een Base64-string of data-URI terug naar een afbeelding in je browser. Bekijk voorbeeld, lees afmetingen & MIME, download als PNG, JPG, GIF, SVG. Geen upload.
CSV naar JSON omzetter
Encodering en formattering
Zet CSV om naar JSON in uw browser. RFC 4180, type-afleiding, headerregel, big-int veilig. 100% privé, geen upload.
HTML naar Markdown omzetter
Encodering en formattering
Zet HTML om naar schone Markdown in je browser — GFM-tabellen, takenlijsten en links. Kies ATX/Setext-koppen en inline- of referentielinks. Ideaal om webinhoud te migreren of LLM's te voeden. 100% privé, geen upload.
Afbeelding naar Base64 converter
Encodering en formattering
Zet afbeeldingen om naar Base64 data-URI's in je browser — PNG, JPG, GIF, WebP, SVG, ICO. Kopieer HTML-, CSS-, Markdown- en JSON-uitvoer. 100% privé, zonder uploaden.
JSON Diff (Vergelijken)
Encodering en formattering
Vergelijk twee JSON-bestanden direct in je browser. Zij-aan-zij markering, RFC 6902 JSON Patch-uitvoer, negeer storende velden zoals tijdstempels en ID's. 100% privé, geen upload.