Markdown Preview

Wat is Markdown?

Markdown is een lichtgewicht opmaaktaal die in 2004 is gemaakt door John Gruber. Het gebruikt opmaaksymbolen in platte tekst — zoals sterretjes, hekjes en koppeltekens — om structuur aan te geven: koppen, vet, cursief, lijsten, links en codeblokken. Een Markdown-previewer zet die platte tekst om in opgemaakte HTML, zodat je precies kunt zien hoe het definitieve document eruitziet vóór publicatie. De originele specificatie is beschreven in Grubers Daring Fireball-documentatie; het formaat is sindsdien gestandaardiseerd als CommonMark.

Markdown is het standaardformaat geworden voor ontwikkelaarsdocumentatie, README-bestanden, statische-sitegeneratoren (Jekyll, Hugo, Astro), wiki's en kennisbanken. GitHub, GitLab, Bitbucket, Stack Overflow, Reddit en Notion ondersteunen Markdown allemaal native. Omdat de broncode platte tekst is, zijn Markdown-bestanden eenvoudig te versiebeheren met Git, te vergelijken tussen branches en samen te voegen zonder conflicten in niet-overlappende secties van een bestand.

Een Markdown-previewtool parseert je invoer en zet die in real time om naar HTML. Zo kun je opmaakfouten, verbroken links en onverwachte nesting opsporen voordat je een bestand commit of een pagina publiceert. Deze previewer draait volledig in je browser zonder server-roundtrip, zodat je aan privé- of gevoelige documentatie kunt werken zonder inhoud over het netwerk te versturen.

Waarom een online Markdown-previewer gebruiken?

Markdown schrijven in een gewone editor zonder preview betekent dat je het resultaat moet raden. Een live previewer sluit die feedbacklus direct.

Gebruikssituaties voor Markdown Preview

Markdown-syntaxreferentie

De onderstaande tabel koppelt veelgebruikte Markdown-syntax aan het weergegeven resultaat en het bijbehorende HTML-element. Dit omvat de CommonMark-basis die vrijwel elke Markdown-parser ondersteunt.

Markdown-varianten vergeleken

Verschillende platforms breiden de originele Markdown-specificatie uit met extra functies. Weten welke variant je als doel hebt, helpt je syntax te vermijden die stilzwijgend mislukt in een andere renderer.

Codevoorbeelden: Markdown programmatisch weergeven

Wanneer je Markdown in een applicatie wilt weergeven in plaats van een browsertool, gebruik dan een van deze bibliotheken. Elk voorbeeld zet een Markdown-string om in een HTML-string.

import { marked } from 'marked'

const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"

// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"

import markdown

md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'

# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])

# Convert a file
with open('README.md') as f:
    html = markdown.markdown(f.read(), extensions=['extra'])

package main

import (
	"bytes"
	"fmt"
	"github.com/yuin/goldmark"
)

func main() {
	source := []byte("# Hello\n\nThis is **Markdown**.")
	var buf bytes.Buffer
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}
	fmt.Println(buf.String())
	// → <h1>Hello</h1>
	// → <p>This is <strong>Markdown</strong>.</p>
}

# Convert Markdown file to HTML
pandoc README.md -f markdown -t html -o output.html

# Convert with GitHub Flavored Markdown
pandoc README.md -f gfm -t html --standalone -o output.html

# Pipe from stdin
echo '# Hello **world**' | pandoc -f markdown -t html
# → <h1>Hello <strong>world</strong></h1>

Veelgestelde vragen