Markdown Preview

Was ist Markdown?

Markdown ist eine leichtgewichtige Auszeichnungssprache, die John Gruber im Jahr 2004 entwickelt hat. Sie verwendet Klartextzeichen wie Sternchen, Rauten und Bindestriche, um Struktur anzuzeigen: Überschriften, Fettdruck, Kursiv, Listen, Links und Codeblöcke. Ein Markdown-Previewer wandelt diesen Klartext in formatierten HTML um, sodass man genau sieht, wie das fertige Dokument vor der Veröffentlichung aussieht. Die ursprüngliche Markdown-Spezifikation ist in Grubers Daring-Fireball-Dokumentation beschrieben; das Format wurde seither als CommonMark standardisiert.

Markdown hat sich zum Standard-Schreibformat für Entwicklerdokumentation, README-Dateien, Static-Site-Generatoren (Jekyll, Hugo, Astro), Wikis und Wissensdatenbanken entwickelt. GitHub, GitLab, Bitbucket, Stack Overflow, Reddit und Notion unterstützen Markdown nativ. Da die Quelldatei reiner Text ist, lassen sich Markdown-Dateien problemlos mit Git versionieren, zwischen Branches vergleichen und in nicht überlappenden Abschnitten ohne Konflikte zusammenführen.

Ein Markdown-Vorschau-Tool parst die Eingabe und wandelt sie in Echtzeit in HTML um. So lassen sich Formatierungsfehler, fehlerhafte Links und unerwartete Verschachtelungen erkennen, bevor eine Datei committet oder eine Seite veröffentlicht wird. Dieser Previewer läuft vollständig im Browser ohne Server-Roundtrip, sodass man an privaten oder sensiblen Dokumenten arbeiten kann, ohne Inhalte über das Netzwerk zu übertragen.

Warum einen Online Markdown-Previewer verwenden?

Markdown in einem einfachen Editor ohne Vorschau zu schreiben bedeutet, die Ausgabe zu erraten. Ein Live-Previewer schließt diese Feedback-Lücke sofort.

Anwendungsfälle für Markdown Preview

Markdown-Syntaxreferenz

Die folgende Tabelle ordnet gängige Markdown-Syntax dem gerenderten Ergebnis und dem entsprechenden HTML-Element zu. Sie deckt die CommonMark-Grundlage ab, die praktisch jeder Markdown-Parser unterstützt.

Markdown-Varianten im Vergleich

Verschiedene Plattformen erweitern die ursprüngliche Markdown-Spezifikation um zusätzliche Funktionen. Zu wissen, welche Variante das Ziel ist, hilft, Syntax zu vermeiden, die in einem anderen Renderer lautlos fehlschlägt.

Codebeispiele: Markdown programmatisch rendern

Wenn Markdown innerhalb einer Anwendung statt in einem Browser-Tool gerendert werden soll, können folgende Bibliotheken verwendet werden. Jedes Beispiel wandelt einen Markdown-String in einen HTML-String um.

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>

Häufig gestellte Fragen