Markdown-Vorschau

Schreibe Markdown und sieh es beim Tippen gerendert, oder kopiere das HTML. Rohes HTML wird als Text angezeigt und Links werden geprüft, sodass in der Vorschau nichts ausgeführt werden kann.

Codebeispiele

Kopieren Sie diese Beispiele in Ihr eigenes Projekt. Sie verwenden nur die Standardbibliothek der Sprache, es muss also nichts installiert werden.

Markieren Sie bis zu 3 Sprachen mit einem Stern, um sie auf jeder Tool-Seite zuerst zu sehen.

const text = '# Hello\n\nSome **bold** text <b>raw</b>'

const escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')

const html = escaped
  .split('\n\n')
  .map((block) =>
    block.startsWith('# ')
      ? `<h1>${block.slice(2)}</h1>`
      : `<p>${block.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')}</p>`,
  )
  .join('\n')

console.log(html)

Was es tut

Zeigt Markdown beim Tippen als gerenderte Seite und liefert das HTML dazu. Es liest CommonMark und die GitHub-Erweiterungen, die die meisten Dokumente nutzen: Tabellen, Aufgabenlisten, Durchstreichen und automatische Links.

So benutzt du es

Tippe oder füge Markdown ein oder ziehe eine Textdatei hinein.
Wähle Vorschau für die gerenderte Seite oder HTML für das Markup. Aktiviere Zeilenumbrüche, wenn ein einfacher Zeilenwechsel eine neue Zeile beginnen soll, wie in Chat-Nachrichten.
Kopiere oder lade das HTML herunter.

Beispiele

# Hallo wird zu <h1>Hallo</h1> und Etwas **fetter** Text zu Etwas <strong>fetter</strong> Text. Eine Tabelle aus senkrechten Strichen und Bindestrichen wird zu einer echten Tabelle, und - [x] erledigt zu einem angehakten Kästchen.

Gut zu wissen

Rohes HTML in der Quelle wird als Text angezeigt und nie weitergegeben, ein Script-Tag oder Event-Handler in eingefügtem Markdown kann also nichts bewirken.
Nur Web-, Mail- und Telefonlinks sowie relative Adressen bleiben Links. Ein javascript:-Link bleibt normaler Text.
Bilder werden in der Vorschau nie geladen. Du siehst Beschreibung und Adresse, und das kopierte HTML enthält das Bild-Tag.
Die Grenze liegt bei 100.000 Zeichen.

Was unterstützt die Vorschau?

CommonMark plus die am häufigsten genutzten GitHub-Erweiterungen: Tabellen, Aufgabenlisten, Durchstreichen und automatische Links. Alles wird in deinem Browser umgewandelt.

Häufig gestellte Fragen

Warum wird mein rohes HTML als Text angezeigt?

Rohes HTML in Markdown kann Skripte ausführen und wird deshalb nie durchgelassen: Script-Tags und anderes Markup erscheinen wie getippt. Nutze stattdessen die Markdown-Syntax. Das kopierte HTML ist auf dieselbe Weise escapt.

Warum werden Bilder nicht geladen?

Bilder werden nie abgerufen, damit eine Vorschau nicht zum Tracking oder zum Laden von Inhalten einer anderen Seite missbraucht werden kann. Du siehst Beschreibung und Adresse als normalen Text. Das kopierte HTML enthält das Bild-Tag.

Sendet dieses Tool meinen Text irgendwohin?

Nein. Alles geschieht in deinem Browser. Was du tippst, wird nie an unsere Server gesendet.

Änderungen an diesem Tool