Markdown-Vorschau

Was ist ein Markdown-Renderer?#

Markdown ist die Klartext-Kurzschrift, mit der Entwickler Rich Text schreiben: **fett**, # Überschriften, - Listen, `Code`. Ein Renderer ist das Programm, das diese Kurzzeichen in das HTML verwandelt, das ein Browser tatsächlich anzeigt. README-Dateien, Dokumentations-Sites, Issue-Tracker-Kommentare, Chat-Apps und Static-Site-Generatoren laufen alle Markdown durch einen Renderer, bevor sie es Ihnen zeigen.

Diese Seite ist ein Markdown-Renderer mit einer spezifischen Design-Priorität: er ist durch Konstruktion sicher, nicht durch Filterung. Die meisten Renderer machen zuerst Markdown zu HTML und versuchen dann, gefährliche Tags aus dem Ergebnis zu schrubben — ein Modell, in dem eine vergessene Regex eine XSS-Schwachstelle bedeutet. Dieses Werkzeug funktioniert umgekehrt: Jedes Zeichen der Quelle wird HTML-escaped, bevor irgendeine Formatierung angewandt wird, und die einzigen Tags, die es jemals emittiert, stammen aus einer fixen, fest einprogrammierten Allow-List (p, h1–h6, ul, ol, li, blockquote, pre, code, hr, a, img, strong, em, del, br). Es gibt keinen Code-Pfad, der aus Ihrer Eingabe ein <script>-Tag erzeugen kann, weil ein rohes < in der Quelle zu < escaped wird, bevor der Formatter es überhaupt sieht. Das macht es für eine strikt-CSP-Statische-Seite wie diese geeignet.

Er implementiert eine fokussierte Teilmenge von CommonMark plus GitHub-Flavored-Markdown-Wesentlichkeiten: eingezäunte Code-Blöcke, ATX-Überschriften, Absätze, geordnete und ungeordnete Listen, Blockquotes, thematische Trennlinien (---), Inline-Code, Fett, Kursiv, Durchgestrichen, Bilder, Links und spitze Autolinks. Dieselbe Eingabe liefert Ihnen zwei Ausgaben nebeneinander — die gerenderte Vorschau und das rohe HTML — sodass Sie genau sehen, was der Renderer produziert hat.

So wird es verwendet#

1. Tippen Sie Markdown in die linke Spalte, oder klicken Sie auf Beispiel, um ein eingebautes Dokument zu laden, das jedes unterstützte Feature beansprucht.
2. Schalten Sie die Ausgabe mit den beiden Schaltflächen über der rechten Spalte:
   • Vorschau zeigt das formatierte Ergebnis, wie es auf einer Webseite erscheinen würde.
   • HTML zeigt das exakte HTML, das der Renderer emittierte, was Sie in ein Template einfügen oder einem Sanitizer-Audit übergeben würden.
3. Klicken Sie auf HTML kopieren, um das erzeugte HTML für die Verwendung woanders zu greifen — Einfügen in ein CMS, Einbetten in ein Template oder Durchlaufen einer Prüfung.
4. Klicken Sie auf Leeren, um beide Spalten zu leeren.
5. Die Statuszeile meldet die gerenderte Bytelänge oder vermerkt, wenn die Eingabe leer ist.

Die wichtigsten Funktionen#

• Sicher durch Konstruktion. Der gesamte Quelltext wird vor der Formatierung HTML-escaped, und der Renderer emittiert nur eine fixe Allow-List an Tags. Es gibt keinen „dann streiche die gefährlichen Teile“-Schritt, der schiefgehen könnte.
• Gefährliche URL-Schemata verworfen. Link- und Bild-URLs werden schema-geprüft; javascript:, vbscript:, data:, file: und about: werden blockiert, und der beanstandete Text wird wörtlich gezeigt, statt ein Live-Link zu werden.
• Zwei Ansichten, eine Quelle. Schalten Sie zwischen gerenderter Vorschau und rohem HTML um, ohne neu zu tippen, sodass Sie sowohl das visuelle Ergebnis als auch das Markup, das es produzierte, verifizieren können.
• GFM-Wesentlichkeiten inklusive. Durchgestrichen (~~Text~~), eingezäunte Code-Blöcke mit Sprachhinweis und aufgabenfreundliche Listen verhalten sich so wie GitHub-Flavored-Markdown.
• Null Abhängigkeiten, 100 % clientseitig. Der Renderer ist selbst implementiert — keine gebündelte Parsing-Bibliothek — und läuft vollständig in Ihrem Browser. Nichts wird hochgeladen, und es gibt kein Backend, das irgendetwas injizieren könnte.

Anwendungsbeispiel#

Klicken Sie auf Beispiel und die linke Spalte füllt sich mit einem Dokument, das die Kernsyntax beansprucht:

# Überschrift

Ein Absatz mit **fett**, *kursiv*, ~~durchgestrichen~~ und `Inline-Code`.

- Aufzählung eins
- Aufzählung zwei

1. zuerst
2. zweitens

> Ein Zitatblock.

[ein Link](https://example.com)

\`\`\`
const x = 42;
console.log(x);
\`\`\`

Schalten Sie auf HTML und Sie sehen genau, was der Renderer emittierte. Der Absatz wird zu:

<p>Ein Absatz mit <strong>fett</strong>, <em>kursiv</em>,
<del>durchgestrichen</del> und <code>Inline-Code</code>.</p>

Der Link wird ein hartes Ziel mit sicheren rel/Attributen:

<a href="https://example.com" rel="noopener noreferrer" target="_blank">ein Link</a>

und der eingezäunte Block wird ein escapetes <pre><code>, das die Quelle wörtlich bewahrt — const x = 42; erscheint als Text, nicht als ausgeführtes Skript. Dieser letzte Punkt ist die ganze Sicherheitsgeschichte im Miniaturformat: Selbst wenn Sie <script>alert(1)</script> in die Quelle einfügten, würde es als der wörtliche Text <script>alert(1)</script> rendern, weil das < zu < escaped wird, bevor der Formatter überhaupt entscheidet, was ein Tag ist.

FAQ#

Warum sollte ich das nutzen, statt einfach HTML direkt zu schreiben?#

Weil Markdown schneller zu tippen, in der Quellform leichter zu lesen ist und nicht-HTML-kundigen Mitwirkenden erlaubt, Inhalt zu schreiben. Dieser Renderer ist für den Fall, dass Sie diese Bequemlichkeit wollen, ohne einer generischen Parsing-Bibliothek auch Sicherheit zu vertrauen — die Sicherheit kommt hier aus der Architektur, nicht aus einem Sanitizer, der am Ende angeflanscht wurde.

Ich habe ein <script>-Tag eingefügt und es wurde als Text gezeigt. Ist das ein Bug?#

Nein — das ist das beabsichtigte Verhalten und die Kern-Sicherheitsgarantie. Jedes Zeichen Ihrer Eingabe wird vor der Formatierung HTML-escaped, sodass jeder tag-artige Text in der Quelle als inert sichtbarer Text gerendert wird. Es gibt keinen Weg über diesen Renderer, ein Live-<script> in die Ausgabe zu bringen.

Warum wurde mein javascript:-Link als Klartext gezeigt?#

Der Renderer schema-prüft jede Link- und Bild-URL. Schemata wie javascript:, vbscript:, data:, file: und about: werden blockiert, weil sie die klassischen Vektoren für Injektionsangriffe sind. Wenn eine URL blockiert wird, belässt der Renderer die ursprüngliche Markdown-Quelle als wörtlichen Text, statt einen gefährlichen Anker zu emittieren.

Unterstützt es Tabellen, Aufgabenlisten oder Fußnoten?#

Nein — dies ist eine bewusste, fokussierte Teilmenge von CommonMark plus GFM-Wesentlichkeiten (eingezäunter Code, Durchgestrichen, Autolinks). Tabellen und Fußnoten bräuchten einen reichhaltigeren Parser und eine größere Angriffsfläche zu überwachen; sie sind hier absichtlich out of scope. Bleiben Sie bei den unterstützten Konstrukten, die oben in den Funktionen aufgeführt sind.