Kostenloser Markdown-zu-PDF-Konverter

Über Markdown

Markdown ist eine leichtgewichtige Auszeichnungssprache, die Klartext in formatiertes HTML umwandelt. Sie wird häufig für Dokumentation, Blogs und technisches Schreiben genutzt, weil sie leicht zu lesen und zu schreiben ist.

Markdown-Syntax

• #, ##, ### · Überschriften (h1, h2, h3)
• **Text** · fettgedruckter Text
• *Text* · kursiver Text
• [Link](url) · Hyperlinks
• - Element · ungeordnete Listen
• 1. Element · geordnete Listen

Häufige Fragen

Kann ich HTML in Markdown verwenden?

Ja. Markdown unterstützt Inline-HTML, sodass Sie HTML-Tags direkt in Ihrem Markdown einbetten können.

Welche Seitenformate werden unterstützt?

A4, Letter, A3 und A5 werden unterstützt. Die Ränder lassen sich von 0 bis 50 Millimetern anpassen.

Erfolgt die PDF-Erzeugung clientseitig?

Ja. Die gesamte Konvertierung erfolgt in Ihrem Browser. Ihr Markdown wird nie an unsere Server gesendet.

Wie dieser Konverter funktioniert

Ein browserbasiertes Markdown-zu-PDF-Werkzeug durchläuft eine zweistufige Pipeline. Zuerst wird der Markdown-Quelltext von einem JavaScript-Markdown-Parser in HTML geparst (diese Seite verwendet marked.js, einen kleinen, schnellen, MIT-lizenzierten Parser, der von der MarkedJS-Organisation gepflegt wird). Das Ergebnis ist das HTML, das Sie in der Live-Vorschau sehen. Zweitens wird dieses HTML in ein PDF umgewandelt, diese Seite verwendet html2pdf.js, das selbst zwei Bibliotheken umschließt: html2canvas zeichnet das gerenderte DOM auf eine Off-Screen-Canvas neu, indem es die berechneten Stile ausliest, und jsPDF schreibt dieses Canvas-Bild in ein PDF-Seitenobjekt und speichert die Datei.

Die Bibliotheken selbst werden von einem öffentlichen CDN geladen, aber Ihr Markdown wird vollständig auf Ihrem Gerät geparst und das PDF erzeugt. Der Browser ist der Renderer; nichts verlässt die Seite.

Eine kurze Geschichte von PDF

PDF begann 1991 als internes Konzept von Adobe-Mitgründer John Warnock. Er wollte eine Möglichkeit, Dokumente zu teilen, die auf jedem Bildschirm, jedem Drucker, jedem Betriebssystem gleich aussahen. Das kurze Papier, mit dem alles begann, trug den Titel „The Camelot Project“, und Adobe veröffentlichte die erste PDF-Spezifikation am 15. Juni 1993 zusammen mit Adobe Acrobat 1.0. Adobe verwaltete das Format fünfzehn Jahre lang, bevor es PDF 1.7 an die ISO übergab. ISO 32000-1:2008 machte PDF zu einem offenen Standard, der ohne Lizenzierung frei nutzbar ist, das mit Abstand wichtigste Datum, um zu verstehen, warum heute jedes moderne Werkzeug, jeder Browser und jedes Betriebssystem PDFs schreiben kann. ISO 32000-2:2017 (PDF 2.0) ergänzte verbesserte digitale Signaturen, eine bessere Unicode-Behandlung und formale Barrierefreiheits-Verankerungen. Die korrigierte Ausgabe von 2020 wurde im April 2023 von der PDF Association frei herunterladbar gemacht, womit die letzte Kostenbarriere fiel.

Ein PDF ist im Wesentlichen ein strukturierter Container von Objekten, die für wahlfreien Zugriff angeordnet sind, Vektorgrafiken (Linien und Bézier-Kurven), Rasterbilder (typischerweise JPEG oder zlib-komprimiert), eingebettete Schriften (Type 1, TrueType, OpenType) und eine Querverweistabelle, die es Lesern ermöglicht, überallhin zu springen, ohne die ganze Datei zu parsen. Es gibt mehrere PDF-Teilmengenstandards, die man kennen sollte: PDF/A (Archivierung, ISO 19005, 2005, verbietet alles, was die langfristige Lesbarkeit beeinträchtigen könnte), PDF/X (Druckproduktion mit fest eingestelltem Farbmanagement) und PDF/UA (Universal Accessibility, ISO 14289-1, 2012, erfordert vollständig getaggte PDFs mit Lesereihenfolge, Alternativtext, in Unicode abgebildeten eingebetteten Schriften und deklarierter Dokumentsprache).

Seitenformate

Die A-Reihe stammt aus ISO 216 (1975 formalisiert, zurückführbar auf die deutsche DIN 476 von 1922). Jedes A-Format hat dasselbe Seitenverhältnis von √2 (≈ 1,414), was bedeutet, dass das Halbieren der langen Kante von A3 zwei A4 ohne Verschnitt ergibt und das Halbieren von A4 zwei A5 ergibt. A0 ist genau 1 m². Die nordamerikanischen Formate (Letter, Legal, Tabloid) ignorieren √2 und gehen auf koloniale Papierherstellungsgebräuche zurück:

• A4: 210 × 297 mm (8,3 × 11,7 Zoll). Globaler Standard außerhalb Nordamerikas.
• A3: 297 × 420 mm (11,7 × 16,5 Zoll). Poster, Doppelseiten.
• A5: 148 × 210 mm (5,8 × 8,3 Zoll). Broschüren, Zines.
• Letter: 8,5 × 11 Zoll (215,9 × 279,4 mm). Standard in den USA, Kanada und auf den Philippinen.

Der Standardrand von 10 mm ist enger als Microsoft Words Standard von 1 Zoll (25,4 mm), funktioniert aber gut für codelastige oder tabellendichte Dokumente, bei denen jede Spalte passen soll.

Der ehrliche Vorbehalt: Text ist nicht auswählbar

Weil der Konverter das HTML auf eine Canvas rendert und die Canvas als Bild in das PDF einbettet, ist der resultierende Text nicht auswählbar, nicht durchsuchbar und nicht für Screenreader zugänglich. Es ist ein getreues Abbild dessen, was der Browser zeichnen würde, aber es ist ein Bild. Das ist in Ordnung für visuelle Artefakte wie Rezeptkarten, Moodboards oder gedruckte Handouts; es eignet sich schlecht für Rechtsdokumente, Lebensläufe, die ein Recruiter nach Stichwörtern durchsuchen möchte, oder alles, was ein Barrierefreiheits-Audit (WCAG / Section 508 / EN 301 549) bestehen muss.

Wenn Sie auswählbaren Text oder ein getaggtes PDF benötigen, sind die richtigen Werkzeuge Pandoc (kombiniert mit LaTeX oder wkhtmltopdf oder weasyprint) oder Adobe Acrobat Pro mit seinen Tagging-Werkzeugen. Pandoc ist der Goldstandard für ernsthafte Dokumentproduktion, installierbar über Homebrew oder Chocolatey, läuft über die Kommandozeile, bietet vollständige Typografiekontrolle auf LaTeX-Niveau mit Fußnoten, Bibliografien, Zitaten, typografischen Anführungszeichen und korrekten Ligaturen.

Seitenumbrüche erzwingen

html2pdf.js berücksichtigt CSS-Eigenschaften zur Druckfragmentierung. Weil Markdown das Einbetten von Inline-HTML erlaubt, können Sie einen Seitenumbruch erzwingen, indem Sie Folgendes einfügen:

<div style="break-before: page;"></div>

Der veraltete Alias page-break-before: always funktioniert ebenfalls. Weitere nützliche Eigenschaften: break-inside: avoid bei einer Tabelle oder einem Codeblock verhindert, dass dieser über Seiten hinweg getrennt wird; orphans und widows steuern, wie viele Zeilen am unteren oder oberen Rand einer Seite zusammenbleiben müssen.

Tipps für saubere Ausgabe

• Vermeiden Sie riesige Rasterbilder. Ein einziges ganzseitiges Foto kann Hunderte von Kilobyte hinzufügen. Ändern Sie die Bildgröße vor dem Einbetten oder verwenden Sie max-width in Inline-Styles, um zu begrenzen, wie groß sie gerendert werden.
• Tabellen, die nicht über Seiten hinweg umbrechen sollen: umschließen Sie sie mit <div style="break-inside: avoid">.
• Codeblöcke benötigen eine Festbreitenschrift. Der Browser verwendet die Festbreitenschrift Ihres Betriebssystems, wenn nichts Spezifischeres festgelegt ist, Consolas unter Windows, Menlo unter macOS, DejaVu Mono unter Linux. Die Ausgabe sieht auf jedem etwas anders aus.
• Testen Sie mit realistischer Inhaltslänge. Ein kurzes Testdokument ist in Ordnung, aber das Layout sieht bei mehr als 10 Seiten manchmal anders aus.
• Letter vs. A4. Wenn Sie mit Empfängern in den USA teilen, wählen Sie Letter; der Rest der Welt erwartet A4. Nicht übereinstimmende Formate machen nichts kaputt, verursachen aber kleinere Eigenheiten bei Rändern / Skalierung am Drucker.

Gängiges Markdown für diese Art von Ausgabe

Die unterstützte Syntax ist die GitHub-Flavoured-Teilmenge, Überschriften, fett und kursiv, Listen, Tabellen, Codeblöcke mit einfacher Syntaxhervorhebung, Blockzitate, Links und Bilder. Fußnoten und Mermaid-Diagramme werden von diesem Build nicht unterstützt. Eine schnelle Erinnerung an die Grundlagen:

• Überschriften: # H1 bis ###### H6.
• Fett und kursiv: **bold**, *italic*, ***both***.
• Listen: - item für ungeordnete, 1. item für geordnete.
• Links und Bilder: [text](url) und ![alt](url). Fügen Sie immer Alternativtext hinzu.
• Tabellen: durch senkrechte Striche getrennte Zeilen mit einer Trennzeile aus Bindestrichen.
• Eingezäunte Codeblöcke: drei Backticks plus optionales Sprach-Tag.
• Blockzitate: > text.

Eine Erinnerung an die Herkunft von Markdown: John Gruber und Aaron Swartz entwarfen es 2004 als „ein leicht lesbares, leicht schreibbares Klartextformat“. Die CommonMark-Standardisierung begann 2014, angeführt von John MacFarlane (Pandoc), Jeff Atwood (Stack Overflow / Discourse) und Ingenieuren von GitHub, Reddit und Meteor. GitHub Flavored Markdown ist eine CommonMark-Obermenge, die Tabellen, Durchstreichungen, Aufgabenlisten und Autolinks hinzufügt.

Weitere Fragen

Warum ist der Text in meinem PDF unscharf?

Weil der Konverter die Seite mit der Anzeigedichte des Browsers rastert. Auf einem Nicht-Retina-Monitor kann das resultierende Bild beim Hineinzoomen weich wirken, da die Canvas mit rund 96 DPI erfasst statt der für den Druck typischen 300 DPI. Die Lösung besteht darin, mit höherer Dichte zu rendern, html2canvas akzeptiert eine scale-Option (typischerweise 2× für Ausgabe in Retina-Qualität), auf Kosten größerer Dateien.

Warum hebt mein Codeblock keine Farben hervor?

marked.js liefert standardmäßig keine Syntaxhervorhebung, es umschließt eingezäunte Blöcke lediglich mit <pre><code class="language-…">-Tags. Echte Hervorhebung benötigt eine separate Bibliothek wie Prism.js oder highlight.js, die dieser Build nicht enthält. Das PDF zeigt Ihren Code in Festbreitenschrift, aber ohne das grün-rote Farbschema, das Sie vielleicht von GitHub erwarten.

Kann ich Fußnoten oder ein Inhaltsverzeichnis einfügen?

Fußnoten ([^1]-Referenzen und [^1]: definitions) sind eine GitHub-Renderfunktion außerhalb der Standard-GFM-Spezifikation und werden von diesem Build nicht geparst. Ein Inhaltsverzeichnis erfordert entweder eine Markdown-Erweiterung (wie das TOC-Plugin von markdown-it) oder das händische Schreiben der Linkliste. Für beides ist Pandoc mit seinem --toc-Flag das richtige Werkzeug.

Wird das PDF für Barrierefreiheit getaggt?

Nein. Die Ausgabe ist ein PDF aus Seitenbildern ohne semantische Tags, Alternativtext oder Hinweise zur Lesereihenfolge, es würde eine PDF/UA-Konformitätsprüfung nicht bestehen. Für Arbeiten mit Barrierefreiheitsanforderung (Behördenformulare, Dokumente des öffentlichen Sektors, alles, was WCAG / EN 301 549 / Section 508 unterliegt) verwenden Sie Pandoc + LaTeX mit einem Barrierefreiheitsfilter, die Tagging-Werkzeuge von Adobe Acrobat Pro oder eine serverseitige WeasyPrint-Pipeline.

Werden Daten an einen Server gesendet?

Nein. Der Text verlässt niemals Ihren Browser. Marked.js parst das Markdown lokal, html2canvas zeichnet auf eine Off-Screen-Canvas, jsPDF baut das PDF-Objekt, und der Browser speichert es. Die Bibliotheken selbst werden von einem öffentlichen CDN mit Subresource-Integrity-Prüfungen geladen; sie werden einmal abgerufen und dann zwischengespeichert. Sobald die Seite geladen ist, funktioniert sie offline.

Verwandte Tools