Markdown in HTML umwandeln (mit Spickzettel)

Mit Markdown schreibst du formatierten Text mit normalen Zeichen: **fett**, # Überschrift, - Listenpunkt. README-Dateien, Notiz-Apps, Wikis und viele Chats nutzen es. Eine Website, ein Newsletter oder ein CMS will aber meist HTML. Die Umwandlung dauert eine Sekunde, wenn du weißt, was dabei herauskommt.

Diese Anleitung zeigt, was aus jedem Markdown-Element wird und wie du mit dem kostenlosen Markdown-zu-HTML-Konverter umwandelst, samt Tabellen, Aufgabenlisten und sicherem Ergebnis.

Was aus Markdown wird

Jedes Markdown-Zeichen hat sein passendes HTML-Tag:

Ein kurzes Beispiel. Dieses Markdown:

# Opening hours

We are open **Monday to Saturday**. Visit [our shop](https://example.com).

- Books
- ~~Magazines~~ Comics

wird zu diesem HTML:

<h1 id="opening-hours">Opening hours</h1>
<p>We are open <strong>Monday to Saturday</strong>. Visit <a href="https://example.com">our shop</a>.</p>
<ul>
<li>Books</li>
<li><del>Magazines</del> Comics</li>
</ul>

Jeder Absatz steht in <p>, die Listenpunkte in <li>, und die Überschrift bekommt eine ID (opening-hours), damit andere Seiten direkt dorthin verlinken können.

Markdown in HTML umwandeln

1. Öffne den Markdown-zu-HTML-Konverter und füge dein Markdown in Markdown-Eingabe ein. Du kannst auch auf Datei öffnen klicken oder eine .md-Datei hineinziehen. Beispiel lädt ein Beispiel.
2. Wähle die Optionen (unten erklärt). Die Standards passen für die meisten: Markdown im GitHub-Stil, IDs für Überschriften, unsicheres HTML entfernt.
3. Klicke auf In HTML umwandeln. Prüfe das Ergebnis unter Vorschau, wechsle zu HTML, um den Code zu sehen, und kopiere ihn oder lade ihn als .html-Datei herunter.

Die Optionen

• GitHub-Stil. Ergänzt, was Standard-Markdown fehlt: Tabellen, Aufgabenlisten (- [x] Erledigt), ~~Durchgestrichenes~~ und Webadressen, die von selbst zu Links werden. Lass es an, außer dein Markdown stammt aus einem strengen CommonMark-Tool.
• Zeilenumbrüche wie getippt. Im Standard-Markdown wird ein einfacher Zeilenumbruch ignoriert: Zwei Zeilen ergeben einen Absatz, erst eine Leerzeile beginnt einen neuen. Mit dieser Option wird jeder Zeilenumbruch zu <br>, wie in GitHub-Kommentaren. Praktisch für Adressen und Gedichte.
• IDs für Überschriften. Gibt jeder Überschrift eine id wie opening-hours, damit Links wie #opening-hours dorthin springen. Wiederholte Überschriften bekommen -1, -2, genau wie auf GitHub.
• Vollständige HTML-Seite. Verpackt das Ergebnis in ein ganzes Dokument mit Titel (aus der ersten Überschrift) und einfachen, gut lesbaren Styles, das sich direkt im Browser öffnen lässt. Lass es aus, um den Inhalt in deine eigene Seite oder dein CMS einzufügen.
• Unsicheres HTML entfernen. Siehe nächster Abschnitt.

Warum „Unsicheres HTML entfernen“ wichtig ist

Markdown darf HTML enthalten, und HTML kann Code ausführen. Alle drei Zeilen unten sind gültiges Markdown:

<img src="photo.jpg" onerror="alert('Hi')">
<script>stealCookies()</script>
[Click me](javascript:alert('Hi'))

Stellst du das auf deine Website, läuft das Skript bei jedem Besucher. Mit Unsicheres HTML entfernen (Standard) werden Skripte, Event-Handler wie onerror und javascript:-Links entfernt, normales HTML wie <b> oder <br> bleibt. Schalte es nur für Markdown aus, das du selbst geschrieben hast. Die Vorschau wird immer bereinigt, egal was du wählst.

Noch ein Datenschutz-Detail: Bilder von anderen Websites werden in der Vorschau nicht geladen, sie erscheinen als beschrifteter Kasten. Im HTML bleiben sie erhalten und erscheinen dort, wo du es veröffentlichst, ganz normal.

Weitere Markdown-Tools

• HTML zu Markdown: die andere Richtung, um eine Webseite in Notizen oder eine README zu verwandeln.
• Markdown-Tabellengenerator: Tabellen in einem Raster bauen oder aus Excel einfügen.
• README-Generator: ein Formular ausfüllen und eine komplette README.md erhalten.

Wird mein Text hochgeladen?

Nein. Die Umwandlung läuft in deinem Browser, dein Markdown verlässt also nie dein Gerät.

Häufige Fragen

Funktioniert es mit README-Dateien von GitHub?

Ja. Lass GitHub-Stil an, dann kommen Tabellen, Aufgabenlisten und Codeblöcke wie auf GitHub heraus. Codeblöcke behalten ihre Sprache als Klasse, etwa language-js, für Syntax-Highlighter.

Kann ich eigene Styles verwenden?

Ja. Ohne Vollständige HTML-Seite bekommst du schlichtes HTML, das die Styles deiner Website übernimmt. Mit der Option ersetzt du den kleinen <style>-Block im Kopf durch dein eigenes Stylesheet.

Wie mache ich einen Zeilenumbruch ohne neuen Absatz?

Beende die Zeile mit zwei Leerzeichen oder einem Backslash, oder schalte Zeilenumbrüche wie getippt ein.