Markdown zu HTML Konverter
Und HTML zurück zu Markdown, mit Live-Vorschau

Was dieser Markdown zu HTML Konverter bietet

Dieser Markdown zu HTML Konverter macht aus Markdown in reinem Text das HTML, das eine Webseite braucht. Tippen Sie ins Markdown Feld, und das HTML erscheint im anderen Feld, während eine Vorschau darunter das Ergebnis zeigt.

Außerdem geht es auch rückwärts. Fügen Sie HTML aus einer Webseite, einem CMS oder einer E-Mail ein, und Sie erhalten sauberes Markdown für ein README, eine statische Website oder eine Notiz-App.

Alles passiert in Ihrem Browser, daher verlassen Entwürfe, private Notizen und Kundendokumente nie Ihr Gerät. Auch die Vorschau ist sicher, denn der Konverter schaltet jedes Skript und jeden gefährlichen Link ab, bevor er das Ergebnis zeigt.

Was Markdown ist

Markdown ist eine einfache Art, Text mit gewöhnlichen Zeichen zu formatieren. Ein # beginnt eine Überschrift, Sternchen machen Text fett oder kursiv, und ein Bindestrich beginnt einen Listenpunkt. Deshalb bleibt der Text gut lesbar, noch bevor Sie ihn umwandeln.

John Gruber hat es 2004 entwickelt, und seine Geschichte und seine Varianten sind ausführlich dokumentiert. Inzwischen steckt es in GitHub, Reddit, Slack, Notion, Jekyll, Hugo und unzähligen Dokumentationsseiten.

Markdown in HTML umwandeln

Tippen oder fügen Sie Markdown in das erste Feld ein. Das HTML aktualisiert sich beim Tippen, mit Überschriften, Absätzen, Listen, Links, Bildern, Zitaten und Codeblöcken an ihrem Platz. Danach kopieren Sie es oder laden es als .html Datei herunter.

Codeblöcke behalten ihre Sprache, daher wird ```js zu einem code Element mit der Klasse language-js. Genau danach suchen Syntax-Highlighter wie Prism und highlight.js.

HTML in Markdown umwandeln

Fügen Sie HTML in das zweite Feld ein, und das Markdown erscheint im ersten. Der Konverter behält Überschriften, fetten und kursiven Text, Links, Bilder, Listen, Zitate, Code und Tabellen. Gleichzeitig verwirft er Skripte, Stile und eingebettete Frames, die in Markdown nichts verloren haben.

Sie können einen Bindestrich oder ein Sternchen für Listenpunkte wählen und Rauten oder Unterstreichungen für die obersten Überschriften. So passt die Ausgabe zum Stil, den Ihr Projekt schon nutzt.

GitHub Tabellen, Aufgabenlisten und mehr

Mit aktiven GitHub Extras versteht der Konverter die Funktionen, die Menschen täglich auf GitHub nutzen. Das heißt Tabellen mit Spaltenausrichtung, Aufgabenlisten mit Kontrollkästchen, Durchstreichen mit doppelten Tilden und nackte Webadressen, die von selbst zu Links werden.

Diese Extras folgen GitHub Flavored Markdown, dem Dialekt, den GitHub in seiner eigenen Anleitung zur Schreib- und Formatierungssyntax beschreibt. Wenn Sie jedoch strenges, schlichtes Markdown brauchen, schalten Sie sie ab.

Welchen Markdown Regeln es folgt

Die Grundregeln stammen aus der CommonMark Spezifikation, dem Standard, den die meisten modernen Tools teilen und den die IETF zusammen mit den anderen Dialekten in RFC 7764 registriert hat. Das deckt die üblichen Fälle ab: Überschriften, Hervorhebung, Links, Referenzlinks, Listen, verschachtelte Listen, Zitate und Code. Seltene Sonderfälle der vollen Spezifikation können jedoch leicht abweichen.

Sicher, egal was Sie einfügen

Markdown kann rohes HTML enthalten, und genau so greifen Angreifer viele Websites an. Deshalb zeigt dieser Konverter HTML Tags in Markdown standardmäßig als reinen Text. Wenn Sie der Quelle vertrauen, aktivieren Sie Rohe HTML Tags erlauben, und der Konverter behält die Tags, entfernt aber Skripte, Frames und Event-Handler.

In jedem Fall prüft der Konverter jeden Link. Ein Link zu javascript: oder einem ähnlichen Schema wird zu einem harmlosen #, und die Prüftabelle zeigt, wie viele er geändert hat.

Prüfungen, die typische Fehler finden

Unter der Vorschau prüft eine Tabelle das Ergebnis. Sie warnt, wenn eine Überschriftenebene fehlt, zum Beispiel ein H2 gefolgt von einem H4, was Screenreader und Suchmaschinen verwirrt. Außerdem markiert sie Bilder ohne Alt-Text und Seiten mit mehr als einem H1.

Für eine vollständige Prüfung der Überschriften einer Live-Seite liest unser Heading Tag Analyzer jede URL und zeigt ihre Gliederung.

Markdown für README Dateien

Fast jedes Projekt auf GitHub beginnt mit einer README.md Datei. Wenn Ihre Dokumentation also noch in einer alten HTML Seite steckt, fügen Sie sie ins HTML Feld ein, kopieren das Markdown, und Ihr README ist in Sekunden fertig.

In umgekehrter Richtung funktioniert es ebenso. Wenn ein Kunde das README zum Beispiel als Webseite möchte, wandeln Sie das Markdown in HTML um und setzen es in eine beliebige Vorlage.

Markdown in Static Site Generatoren

Jekyll, Hugo, Eleventy, Astro und Docusaurus bauen Websites aus Markdown Dateien. Daher heißt der Umzug einer alten Website meist, zuerst viele HTML Seiten in Markdown umzuwandeln, und dieser Konverter erledigt das Seite für Seite.

Bevor Sie die Dateien committen, werfen Sie einen Blick auf die Prüftabelle. Sie zeigt übersprungene Überschriftenebenen und Bilder ohne Alt-Text, die eine statische Website sonst unverändert veröffentlichen würde.

Text, der aus Word oder Google Docs stammt

Beim Kopieren aus Word oder Google Docs kommt meist viel verstecktes Styling mit. Fügen Sie den Text zuerst in Ihr CMS oder einen E-Mail-Entwurf ein, kopieren Sie dann das HTML und fügen Sie es hier ein. Der Konverter behält die Struktur, etwa Überschriften, Listen und Links, und lässt Schriften und Farben zurück.

Auf diese Weise erhalten Sie sauberes Markdown, das Sie überall speichern, bearbeiten und wiederverwenden können, ohne den Ballast von Office-Programmen.

Formatieren nur mit der Tastatur

Viele Autoren mögen Markdown, weil sie nie zur Maus greifen müssen. Statt in eine Werkzeugleiste zu klicken, tippen Sie zwei Sternchen für Fettdruck oder eine Raute für eine Überschrift und bleiben im Gedankenfluss. Später macht diese Seite den Entwurf in einem Schritt zu HTML. Gleichzeitig bleiben die ursprünglichen Notizen in jedem Texteditor lesbar, auch noch in vielen Jahren.

Tabellen richtig anlegen

Eine Tabelle braucht zwei Dinge: eine Kopfzeile und direkt darunter eine Zeile aus Bindestrichen zwischen senkrechten Strichen. Ohne diese Trennzeile liest der Konverter die Zeilen als reinen Text, daher erscheint die Tabelle nie.

Die übrigen Zeilen dürfen ungleich lang sein, denn der Konverter richtet die Zellen für Sie aus. Außerdem legt ein Doppelpunkt an einer Seite der Bindestriche die Spaltenausrichtung fest, und die Vorschau zeigt sie sofort.

Halten Sie schließlich jede Tabelle einfach. Markdown kann keine Zellen verbinden, daher sollten Sie eine Tabelle, die das braucht, als HTML in Ihrer Seite lassen.

Wo Menschen es nutzen

Autoren schreiben in Markdown und fügen das HTML in ein CMS ohne Markdown Unterstützung ein. Entwickler bringen alte HTML Dokus in eine Markdown Website. Support-Teams machen außerdem aus Helpdesk-Seiten eine Wissensdatenbank, und Studierende räumen Notizen auf, die sie aus dem Web kopiert haben.

In jedem Fall spart das Zwei-Wege-Design Zeit. Sie können nämlich umwandeln, das Markdown bearbeiten und erneut umwandeln, ohne etwas neu zu tippen.

Tipps für sauberes Markdown

Lassen Sie eine Leerzeile zwischen Blöcken, etwa vor einer Liste oder nach einer Überschrift. Rücken Sie verschachtelte Listenpunkte um zwei oder vier Leerzeichen ein, und umschließen Sie Code mit drei Backticks, statt ihn einzurücken. Geben Sie außerdem jedem Bild eine kurze Beschreibung in den eckigen Klammern.

Wenn Sie fertig sind, zählen Sie die Wörter mit unserem Wortzähler, oder prüfen Sie Seitentitel und Beschreibung mit der SERP Snippet Vorschau.