§

Plak Markdown

§

Ruw

§

Preview

De preview wordt gesaniteerd door DOMPurify — script-tags, event handlers en javascript:-URI's worden vóór het renderen verwijderd.

Markdown is de standaardtaal van de Nederlandse techgemeenschap geworden. Tweakers en Computable publiceren technische artikelen vanuit Markdown-bronnen, terwijl de engineering-blogs van ABN AMRO en ING hun kennisbanken op MkDocs en Docusaurus draaien. Booking.com en Adyen documenteren interne API-platforms in Markdown en exporteren naar statische HTML-portalen. Studenten van TU Delft en TU Eindhoven leveren hun afstudeerverslagen in Markdown-Jupyter-notebooks; Wageningen University verspreidt RMarkdown-templates voor cursussen data science. De Nederlandse overheid publiceert het ontwerpsysteem van digitaaloverheid.nl en de NL Design System-componentdocs in Markdown, en KPN draait dev-portals op Markdown-bronnen die naar HTML worden gerenderd. Markdown naar HTML converteren hoort bij elke CMS-migratie en herontwerp.

Wat is Markdown naar HTML-conversie?

Markdown is een lichtgewicht platte-tekstformaat dat minimale leestekens (# voor koppen, * voor nadruk, - voor lijstitems) gebruikt om gestructureerd proza te coderen. GitHub Flavored Markdown (GFM) breidt de originele CommonMark-specificatie uit met tabellen, doorhalingen, taaklijsten en autolinks. HTML is de gerenderde vorm die de browser weergeeft. Markdown naar HTML converteren laat je in de lichtgewicht syntax schrijven en uitleveren aan een gerenderd oppervlak — een README, een statische-sitepagina, een e-mailbody — zonder de tags handmatig te schrijven.

Welke GitHub Flavored Markdown-functies worden ondersteund?

De meegeleverde marked@12.0.2-parser ondersteunt de volledige GFM-superset: ATX-stijl koppen # tot ######, geordende en ongeordende lijsten met nesting, vetgedrukt **text** en cursief *text*, doorhaling ~~text~~, inline links [text](url) en inline afbeeldingen ![alt](src), fenced codeblokken met optionele taaltags (```js), inline code spans `code`, pipe-tabellen met header-rij, GFM-taaklijsten - [ ] / - [x], blockquotes >, horizontale lijnen --- en autolinks. Elk element rendert in het preview-paneel op dezelfde manier als GitHub het rendert.

Hoe werkt Markdown naar HTML-conversie?

Elke conversie draait lokaal in je browser via twee meegeleverde bibliotheken — geen CDN, geen fetch, geen telemetrie. De belangrijkste stappen zijn:

  1. Parsen: marked.parse(source) leest je Markdown en produceert een HTML-string. De parser draait in GFM-modus, zodat tabellen, taaklijsten, doorhalingen en autolinks allemaal worden herkend.
  2. Saniteren: de HTML-uitvoer wordt door DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) gehaald voordat ze aan innerHTML wordt toegekend. DOMPurify is dezelfde XSS-sanitizer die Mozilla MDN, Atlassian en Microsoft 365 gebruiken — die parseert de HTML, loopt door de DOM en verwijdert <script>-elementen, elk on* event-handler-attribuut en javascript:-URI-schema's.
  3. Renderen: de gesaniteerde HTML wordt via innerHTML naar het preview-paneel geschreven, en de ruwe HTML wordt in het tweede paneel getoond via een alleen-lezen <textarea> zodat je het markup kunt kopiëren. De live-modus debounce't invoer 150 ms zodat de preview tijdens het typen update zonder de parser te belasten.

Waarom Markdown naar HTML met deze tool converteren?

  • Privacy: elke parse-, sanitize- en render-stap gebeurt in je browser. De Markdown — inclusief ongepubliceerde blogposts, interne documentatieconcepten en vertrouwelijke README-inhoud — bereikt onze servers nooit.
  • XSS-veilig standaard: het preview-paneel haalt elke HTML-string door DOMPurify vóór innerHTML, dus een <script>-tag of onerror=-handler in de ruwe HTML in je Markdown levert een inert preview op. Het ruwe tabblad toont de niet-gesaniteerde uitvoer ter inspectie, in een <textarea> via value — nooit uitgevoerd.
  • GFM-compleet: tabellen, doorhalingen, taaklijsten en autolinks renderen op de manier waarop GitHub ze rendert. Een Markdown-pipe-tabel wordt een HTML <table> met <thead> en <tbody> — geen verloren rijen, geen platgeslagen structuur.

Wat zijn veelvoorkomende toepassingen van Markdown naar HTML-conversie?

Markdown naar HTML converteren duikt overal op in documentatie, statische-sitewerk en e-mailauthoring:

  • GitHub-README's schrijven: een project-README lokaal als Markdown opstellen en bekijken vóór het pushen. De preview komt overeen met de GFM-renderer van GitHub voor tabellen, taaklijsten en fenced codeblokken.
  • Statische-site-inhoud: een Markdown-post plakken en de HTML pakken voor een CMS-veld of templating-engine die markup verwacht in plaats van Markdown-bron.
  • E-mailtemplates: een transactionele e-mailbody als Markdown schrijven en naar HTML converteren voor de templating-engine van de e-mailprovider. De uitvoer is platte semantische HTML — geen inline stijlen, geen e-mailclient-quirks erin geweven.

Hoe ziet een voorbeeld van Markdown naar HTML-conversie eruit?

# Title\n\n- item 1\n- item 2\n\n[link](https://example.com) plakken produceert een preview-paneel met <h1>Title</h1>, een ongeordende lijst met twee items en een <a href="https://example.com">link</a>. Het ruwe paneel toont de exacte HTML-string zodat je die direct in een template kunt kopiëren. Een pipe-tabel met een uitlijnrij |---|---| wordt een volledige <table> met <thead> en <tbody> — wat bevestigt dat GFM-tabellen renderen zoals GitHub ze rendert.

Draait deze Markdown naar HTML-converter volledig in mijn browser?

Ja. Elke parse-, sanitize- en render-stap draait lokaal als JavaScript binnen je browsertab. De meegeleverde bibliotheken — marked@12.0.2 en DOMPurify@3.1.7 — worden vanaf dezelfde origin als de pagina geserveerd, dus geen CDN-afhankelijkheid, geen fetch, geen XMLHttpRequest, geen navigator.sendBeacon op de invoer. De tool werkt ook offline zodra de pagina geladen is, omdat het een statische HTML/CSS/JS-bundel is met de vendor-bibliotheken ernaast gekopieerd. Ongepubliceerde posts, interne documenten en vertrouwelijke README's blijven op je apparaat.

Is het gerenderde preview-paneel XSS-veilig?

Ja. Elke HTML-string die aan innerHTML wordt toegewezen, gaat eerst door DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify is de open-source XSS-sanitizer die door Cure53 onderhouden wordt; het is dezelfde library die Mozilla MDN, Atlassian en Microsoft 365 gebruiken om door gebruikers aangeleverde HTML te hardenen. Het standaard html-profiel verwijdert <script>-elementen, elk on* event-handler-attribuut (onerror, onclick, enz.), javascript:-URI-schema's binnen href / src en bekende gevaarlijke CSS-expressies. <img src=x onerror=alert(1)> plakken levert een preview op waarin document.querySelector('#output-preview img[onerror]') null retourneert en geen alert afgaat.

Worden GFM-tabellen ondersteund?

Ja. De richting Markdown → HTML verwerkt pipe-tabellen native via de GFM-modus van marked — een header-rij gescheiden door een uitlijnrij |---|---|, gevolgd door datarijen, produceert een <table> met <thead> + <tbody>. Doorhaling (~~text~~<del>text</del>) en taaklijsten (- [ ] / - [x]<input type="checkbox">) renderen op dezelfde manier als GitHub.

Converteert mijn Markdown getrouw?

Voor de canonieke GFM-featureset — koppen h1 tot en met h6, geordende en ongeordende lijsten met nesting, vet / cursief / doorhaling, inline links, inline afbeeldingen, fenced codeblokken met taaltags, inline code spans, pipe-tabellen, taaklijsten, blockquotes, horizontale lijnen en autolinks — is de HTML-uitvoer stabiel en correspondeert met de renderer van GitHub. Een paar gedragingen om te weten: ruwe inline HTML binnen je Markdown (bijv. <sub>text</sub>) gaat ongewijzigd door in de uitvoer, en CommonMark setext-koppen (===-onderlijning) en ATX-koppen (# Title) produceren beiden dezelfde <h1>. Dit zijn gedocumenteerde marked-gedragingen, geen bugs. Als je de omgekeerde richting nodig hebt, gebruik dan de HTML naar Markdown-tool.

Wordt syntax highlighting in fenced codeblokken ondersteund?

Niet in v1. Fenced codeblokken renderen met een monospaced lettertype en een subtiele achtergrond, maar zonder token-highlighting per taal. Syntax highlighting toevoegen zou Prism of highlight.js mee moeten bundelen, die elk 15–40 KB toevoegen plus een grammar-bestand per taal en een themamatrix die uitgelijnd moet worden met het Workshop Terminal-palet. Voor nu focust de renderer op correctheid en XSS-veiligheid; als er gebruikersvraag is naar inline highlighting, is een opt-in toggle een haalbaar vervolg.

Deze Markdown naar HTML Converter wordt geleverd met marked@12.0.2 en DOMPurify@3.1.7 meegebundeld vanaf dezelfde origin, ondersteunt de volledige GFM-featureset en saniteert elke gerenderde HTML-string voordat die het DOM raakt. Geen upload, geen CDN, geen telemetrie — elke byte blijft in je browser.