Markdown → HTML

Markdown in sauberes, semantisches HTML umwandeln. Kostenlos, ohne Upload. max. 1 GB · Bis zu 1 GB · Lokal verarbeitet, nie an einen Server gesendet.

Markdown ist zum Schreiben da, HTML zum Veröffentlichen, und irgendetwas muss zwischen beiden vermitteln. Der Anlass ist fast immer ein genauer: einen Artikel in ein Redaktionssystem einsetzen, das nur HTML annimmt; eine Dokumentationsseite erzeugen, ohne dafür erst einen Website-Generator zu installieren; oder nachsehen, wie eine Readme-Datei aussehen wird, bevor sie online geht.

Das Werkzeug nimmt den Text aus dem Eingabefeld oder aus einer importierten .md-Datei, übergibt ihn der Bibliothek marked und zeigt das Ergebnis unmittelbar darunter an. Zwei Ausgaben stehen zur Wahl: eine vollständige, für sich allein tragfähige HTML-Seite zum Herunterladen, oder das Fragment allein, in die Zwischenablage kopiert und bereit, in eine vorhandene Vorlage eingesetzt zu werden.

Eines sollten Sie vorher wissen. Das erzeugte HTML läuft durch einen Filter, für die Vorschau ebenso wie für den Download. Wenn Ihr Markdown von Hand geschriebene HTML-Tags enthält, bleibt ein Teil davon erhalten und ein anderer wird entfernt. Die genaue Liste steht weiter unten, zusammen mit der erkannten Markdown-Variante und den geläufigen Schreibweisen, die nicht dazugehören.

So funktioniert es

  1. Markdown eingeben oder importieren Schreiben Sie direkt in das Feld, fügen Sie Ihren Text ein, oder laden Sie über die Importschaltfläche eine Datei mit der Endung .md oder .markdown, deren Inhalt den bisherigen Feldinhalt ersetzt.
  2. Auf „Starten“ klicken Beim ersten Mal wird marked nachgeladen, danach erscheint das Ergebnis unterhalb des Feldes. Der Text bleibt änderbar: Korrigieren und erneut umwandeln, so oft es nötig ist.
  3. Die Vorschau kontrollieren Überschriften, Listen, Tabellen und Codeblöcke erscheinen genau so, wie sie erzeugt werden. Eine Überschrift, die einfacher Text geblieben ist, weist auf ein Rautezeichen ohne folgendes Leerzeichen hin.
  4. Die vollständige Seite herunterladen Die Datei document.html steht für sich allein: Dokumenttyp-Deklaration, Codierung UTF-8, Sprachattribut, Viewport-Angabe für Mobilgeräte und eingebettetes Stylesheet. Eine externe Datei wird nicht gebraucht.
  5. Oder nur das Fragment kopieren Die zweite Schaltfläche legt den Inhalt ohne Kopfbereich und ohne Gestaltung in die Zwischenablage – die Form, die die meisten Redaktionssysteme erwarten.

Die erkannte Markdown-Variante

marked arbeitet standardmäßig mit der Variante GitHub Flavored Markdown. Über die Grundsyntax hinaus – Überschriften, fett, kursiv, verschachtelte Listen, Zitate, Verweise, Bilder und Trennlinien – stehen Ihnen Tabellen mit spaltenweiser Ausrichtung zur Verfügung, durchgestrichener Text zwischen doppelten Tilden, Kontrollkästchen für Aufgabenlisten und Codeblöcke, die von drei Gravis-Zeichen eingefasst werden. Eine im Klartext geschriebene Adresse wird selbsttätig zum Verweis. Die hinter den Gravis-Zeichen genannte Sprache landet als Klasse am Code-Tag, ohne dass eine Syntaxhervorhebung angewandt würde.

Drei Verhaltensweisen überraschen regelmäßig. Ein einfacher Zeilenumbruch beendet den Absatz nicht: Zwei aufeinanderfolgende Zeilen werden zusammengezogen, sofern die erste nicht mit zwei Leerzeichen endet. Überschriften entstehen ohne Ankerkennung, sodass ein von Hand geschriebenes Inhaltsverzeichnis seine Ziele nicht findet. Und Fußnoten, Definitionslisten sowie Metadatenblöcke am Dateianfang werden nicht unterstützt; Letztere kommen als Trennlinie mit anschließender Überschrift zweiter Ebene heraus.

Achten Sie außerdem auf die Einrückung. Vier Leerzeichen am Zeilenanfang gelten in Markdown als Codeblock: Ein Absatz, den Sie zur besseren Lesbarkeit im Editor eingerückt haben, erscheint in der Ausgabe unversehens auf grauem Grund und in nichtproportionaler Schrift. Bei verschachtelten Listen ist die Einrückung dagegen genau das gewünschte Mittel, um eine Ebene tiefer zu gehen.

Das HTML, das Sie selbst in Ihr Markdown schreiben

Die Markdown-Syntax erlaubt es, HTML-Tags mitten in den Text zu setzen, und marked reicht sie unverändert weiter. Danach greift ein Filter, vor der Vorschau ebenso wie vor dem Download, und entfernt stets dieselben Elemente:

Dazu werden Ereignisattribute gestrichen, ebenso Verweise, deren Adresse mit javascript, data oder vbscript beginnt – mit der einzigen Ausnahme von Bildern, die als base64 eingebettet sind.

Alles Übrige bleibt erhalten: eine von Hand geschriebene Tabelle, ein aufklappbarer Block, hochgestellte Zeichen, Abkürzungen, Container samt ihren Klassen und Ihre Bilder überstehen die Umwandlung unbeschadet. Ein über einen eingebetteten Rahmen eingefügtes Video verschwindet dagegen; fügen Sie die Einbettung im Anschluss aus Ihrem Redaktionssystem heraus wieder ein.

Die heruntergeladene Seite und was noch zu tun bleibt

Die erzeugte Datei genügt sich selbst: Sie bringt ihre Gestaltung mit, verlangt weder eine externe Schrift noch ein externes Skript und öffnet sich auch ohne Internetverbindung. Die Aufmachung ist zurückhaltend: eine mittig gesetzte Spalte von 760 Pixeln, Fließtext in Georgia, Überschriften in Helvetica, Codeblöcke auf hellgrauem Grund, Tabellen mit feinen Linien, Bilder auf die Textbreite zurückgeholt.

Drei Nacharbeiten bleiben an Ihnen hängen. Der Dokumenttitel lautet Document und die Datei heißt immer document.html: Öffnen Sie sie in einem Editor, um das Titel-Tag zu ändern und die Datei umzubenennen. Das Sprachattribut am html-Element steht auf fr, weshalb Sie es vor der Veröffentlichung auf de setzen sollten – Screenreader und Suchmaschinen werten es aus. Und die Bilder behalten den Pfad, den Sie geschrieben haben: Ein relativer Pfad setzt voraus, dass der zugehörige Ordner die Seite begleitet, eine vollständige Adresse funktioniert unverändert.

Blogbeitrag, Dokumentation, und was das Werkzeug nicht leistet

Für einen Blogbeitrag nehmen Sie die Schaltfläche, die das Fragment kopiert: Die meisten Redaktionssysteme erwarten den Inhalt allein und legen ihre eigene Vorlage darum, während eine vollständige Seite dort ein Dokument im Dokument ergäbe. Für eine Anleitung, die weitergegeben oder abgelegt werden soll, passt die vollständige Seite besser.

Für eine Dokumentationswebsite im eigentlichen Sinn, mit Navigation zwischen den Seiten und automatischem Inhaltsverzeichnis, bleibt ein Generator für statische Seiten das geeignete Werkzeug: Hier wird jede Datei für sich umgewandelt, und nichts verbindet die Seiten miteinander. Der eingegebene Text verlässt die Seite nicht, nachgeladen wird allein die Bibliothek marked, ausgeliefert von dieser Website selbst; der lokale Verlauf hält lediglich fest, dass eine Umwandlung stattgefunden hat, samt der Wortzahl des Ausgangstextes.

Häufige Fragen

Warum verschwinden meine Zeilenumbrüche?

marked folgt der ursprünglichen Markdown-Regel, nach der ein einfacher Zeilenumbruch den Absatz nicht beendet. Beenden Sie die Zeile mit zwei Leerzeichen, um einen Umbruch zu erzwingen, oder lassen Sie eine Leerzeile dazwischen.

Warum ist mein Codeblock nicht eingefärbt?

Die hinter den Gravis-Zeichen genannte Sprache wird zwar zur Klasse am Code-Tag, aber es wird keine Hervorhebung angewandt. Binden Sie in der fertigen Seite eine Bibliothek für Syntaxhervorhebung ein, wenn Sie Farbe möchten.

Warum ist meine Videoeinbettung verschwunden?

Eingebettete Rahmen gehören zu den Elementen, die der Filter entfernt, zusammen mit Skripten, eingebetteten Objekten und Formularen. Veröffentlichen Sie das HTML ohne das Video und fügen Sie die Einbettung anschließend aus Ihrem Redaktionswerkzeug heraus hinzu.

Warum führen die Verweise in meinem Inhaltsverzeichnis ins Leere?

Überschriften entstehen ohne Ankerkennung. Setzen Sie den Anker selbst als HTML vor jede Überschrift, oder lassen Sie Ihr Redaktionssystem die Kennungen bei der Anzeige erzeugen.

Mein Metadatenblock steht mit in der Seite, ist das normal?

Ja. Ein Metadatenblock am Dateianfang wird nicht als solcher erkannt: Die Trennlinie darüber wird zur waagerechten Linie, und die folgende Zeile wird zur Überschrift zweiter Ebene. Entfernen Sie den Block vor der Umwandlung.

Kann ich mehrere .md-Dateien nacheinander verarbeiten?

Jeder Import ersetzt den Inhalt des Feldes, die Umwandlungen laufen also einzeln ab. Da das Feld änderbar bleibt, können Sie auch mehrere Dokumente hintereinander hineinkopieren.

Werden Markdown-Tabellen in echte HTML-Tabellen umgewandelt?

Ja. marked arbeitet in der Variante GitHub Flavored Markdown, und dazu gehören Tabellen samt spaltenweiser Ausrichtung, durchgestrichener Text zwischen doppelten Tilden und Codeblöcke zwischen drei Gravis-Zeichen. Eine Ausnahme sind die Kontrollkästchen von Aufgabenlisten: Der Sicherheitsfilter entfernt sämtliche Formularelemente, sodass diese Punkte als gewöhnliche Listeneinträge herauskommen. In der heruntergeladenen Seite bekommen die Tabellen feine Linien mit; im kopierten Fragment steht das Markup ohne jede Gestaltung, damit Ihre eigene Vorlage greift.

Verlässt mein Text die Seite, wenn ich ihn umwandle?

Nein, der eingegebene Text bleibt im geöffneten Tab. Nachgeladen wird beim ersten Klick allein die Bibliothek marked, ausgeliefert von dieser Website selbst und nicht von einem fremden CDN; der lokale Verlauf hält lediglich fest, dass eine Umwandlung stattgefunden hat, samt der Wortzahl des Ausgangstextes, nie den Text. Auch der Import einer .md-Datei ändert daran nichts: Sie wird gelesen, nicht verschickt. Eine Anmeldung ist nicht vorgesehen.

Soll ich die vollständige Seite herunterladen oder nur das Fragment kopieren?

Für ein Redaktionssystem nehmen Sie „HTML kopieren (Fragment)“: Der Code kommt ohne Kopfbereich und ohne Gestaltung und fügt sich in Ihre Vorlage ein, während eine vollständige Seite dort ein Dokument im Dokument ergäbe. „↓ HTML-Seite herunterladen“ lohnt sich für eine Anleitung, die weitergegeben oder abgelegt wird – sie bringt ihre Gestaltung mit und öffnet sich ohne Internetverbindung. Rechnen Sie dann mit einer Nacharbeit: Die Datei heißt immer document.html und trägt den allgemeinen Titel „Dokument“, den Sie in einem Editor ersetzen.

Ähnliche Werkzeuge

Weitere Werkzeuge entdecken

Kategorien