Markdown Tricks: Workarounds für fehlende Funktionen

Markdown-Tricks sind HTML-Schnipsel und kreative Syntax-Kniffe, die Funktionen nachbilden, die die Markdown-Kernspezifikation auslässt, von unterstrichenem Text bis zu klickbaren Video-Vorschaubildern. Fast jeder Trick hängt an einer Bedingung: Der Renderer muss Inline-HTML akzeptieren. CommonMark reicht rohes HTML standardmäßig durch, deshalb zeigen VS Code, Obsidian, Typora und der Editor dieser Website diese Workarounds korrekt an. Bereinigte Plattformen verhalten sich anders. GitHub filtert die Ausgabe durch eine feste Tag-Whitelist und löscht jedes style-Attribut, während Reddit und Discord HTML komplett ignorieren. Jeder Abschnitt unten zeigt die Syntax und listet die Renderer auf, die sie behalten oder entfernen.

Text in Markdown unterstreichen

Markdown hat keine Syntax zum Unterstreichen; wer in Markdown unterstreichen will, umschließt den Text mit einem HTML-Tag <ins> oder <u>. Das <ins>-Tag kennzeichnet eingefügten Text und wird in jedem großen Browser unterstrichen dargestellt. GitHubs Sanitizer behält <ins> und verwirft <u>, deshalb ist <ins> die portable Wahl für READMEs.

Submit the form <ins>before 30 June</ins> to qualify.

Obsidian und Typora rendern beide Tags. Bear und Simplenote verzichten auf den HTML-Weg und bieten eigene Kurzbefehle zum Unterstreichen. Auf Reddit erscheinen die Tags als wörtlicher Text, weil der dortige Parser HTML verwirft.

Absätze einrücken

Markdown verschluckt führende Leerzeichen und wandelt Einrückungen mit 4 Leerzeichen in Codeblöcke um; rücken Sie einen Absatz stattdessen mit der Entität für das geschützte Leerzeichen &nbsp; ein. Jede Entität überlebt als ein sichtbares Leerzeichen in der Ausgabe. Vier davon imitieren einen klassischen Tabulator.

&nbsp;&nbsp;&nbsp;&nbsp;The opening line of this paragraph sits four spaces in.

Entitäten passieren fast jeden Renderer, GitHub eingeschlossen, weil sie Zeichenreferenzen und keine Tags sind. Die Grenze zeigt sich bei größerem Umfang. Ein Dokument mit Dutzenden eingerückter Absätze wird im Quelltext schwer lesbar, und ein Editor mit Vorlagensteuerung wie iA Writer löst Einrückungen sauberer.

Text in Markdown zentrieren

Wer in Markdown Text zentrieren möchte, nutzt das <center>-Tag oder <p style="text-align:center"> dort, wo Inline-CSS überlebt. HTML 4.01 hat <center> schon 1999 als veraltet eingestuft, doch Browser respektieren es weiterhin, und die meisten Markdown-Renderer reichen es unverändert durch.

<center>Chapter 7</center>

<p style="text-align:center">Chapter 7</p>

GitHub löscht style-Attribute, deshalb scheitert die zweite Form dort. README-Autoren zentrieren Logos und Badges stattdessen mit <div align="center">, weil das align-Attribut GitHubs Sanitizer übersteht. Typora und die VS-Code-Vorschau rendern die CSS-Variante wie geschrieben.

Textfarbe ändern

Markdown bietet keine Kontrolle über die Textfarbe; nutzen Sie für die Markdown-Textfarbe <span style="color:#0969da"> dort, wo CSS erlaubt ist, oder das alte <font color="red">-Tag in Renderern, die es noch akzeptieren.

<span style="color:#0969da">This sentence renders in blue.</span>

<font color="red">This sentence renders in red.</font>

Das <font>-Tag wurde 1999 als veraltet eingestuft, und moderne Sanitizer gehen hart damit um. GitHub entfernt sowohl das style-Attribut als auch das color-Attribut, deshalb erzeugt keine der beiden Formen farbigen Text in einem README. Ein gängiger Ersatz dort ist ein umzäunter Codeblock mit diff als Sprache, der Zeilen mit + am Anfang grün und Zeilen mit - am Anfang rot färbt. Obsidian und Typora respektieren die <span>-Variante, ebenso Hugo- und Jekyll-Websites, die rohes HTML durchreichen.

Kommentare verstecken

Verbergen Sie eine Notiz vor Lesern mit dem Linkreferenz-Trick [comment]: # oder mit einem gewöhnlichen HTML-Kommentar. Beide halten den Text in der Quelldatei und aus der gerenderten Seite heraus.

[everything in this line disappears from the output]: #

<!-- This note also stays hidden. -->

Der Klammer-Trick zweckentfremdet Linkreferenz-Definitionen, eine Kernfunktion von Markdown, deshalb funktioniert er selbst dort, wo HTML blockiert wird. Setzen Sie eine Leerzeile darüber und darunter, sonst kann ein angrenzender Absatz mit der Definition verschmelzen. Der HTML-Kommentar ist leichter lesbar, bleibt aber im Quelltext der erzeugten Seite stehen, wo ihn jeder einsehen kann. GitHub unterstützt beide Methoden.

Hinweisboxen und Callouts

Bauen Sie eine Hinweisbox aus einem Emoji und einer fett gesetzten Beschriftung innerhalb eines Blockzitats, oder verwenden Sie GitHubs Alert-Syntax, eingeführt 2023.

> [!WARNING]
> This command overwrites all 14 archived backups.

> 💡 **Tip:** Blockquote callouts work in any renderer.

GitHub unterstützt 5 Alert-Typen: NOTE, TIP, IMPORTANT, WARNING und CAUTION. Jeder erscheint auf github.com mit eigenem Symbol und eigener Akzentfarbe, doch überall sonst fällt die Syntax auf ein schlichtes Blockzitat zurück. Obsidian hat ein eigenes Callout-Format, > [!note], hinzugefügt in Version 0.14 im Jahr 2022, und MkDocs mit dem Material-Theme nutzt Zeilen mit !!! note. Das Emoji-Blockzitat ist die einzige Variante, die auf allen Plattformen akzeptabel aussieht.

Bilder skalieren

Ersetzen Sie die Markdown-Bildsyntax durch ein <img>-Tag und setzen Sie die Attribute width und height in Pixeln.

<img src="diagram.png" alt="Deployment diagram" width="480" height="270">

GitHub behält die Attribute width und height, obwohl es style="width:50%" entfernt, deshalb sind Pixelwerte der verlässliche Weg für READMEs. Feste Abmessungen verhindern außerdem Layoutverschiebungen beim Laden der Seite. Renderer ohne HTML-Unterstützung zeigen das rohe Tag als Text an, behalten Sie auf Plattformen wie Reddit also die einfache Form ![alt](url) bei.

Bildunterschriften

Ergänzen Sie eine Bildunterschrift mit den Tags <figure> und <figcaption>, oder setzen Sie eine kursive Zeile direkt unter das Bild.

<figure>
  <img src="harbor.jpg" alt="Fishing boats at dawn">
  <figcaption>Hobart's harbor, photographed in March 2025.</figcaption>
</figure>

![Fishing boats at dawn](harbor.jpg)
*Hobart's harbor, photographed in March 2025.*

Sowohl <figure> als auch <figcaption> stehen auf GitHubs Whitelist, die semantische Variante funktioniert also in READMEs. Die kursive Zeile ist der Rückgriff für Renderer ohne HTML. Screenreader lesen sie als Fließtext und nicht als Bildunterschrift vor, das ist der Preis ihrer Portabilität.

Links in neuem Tab öffnen

Markdown-Links können sich nicht in einem neuen Tab öffnen; schreiben Sie den Anker stattdessen als rohes HTML mit target="_blank".

<a href="https://example.com/report" target="_blank" rel="noopener">2026 annual report</a>

Ergänzen Sie rel="noopener", damit die neue Seite kein Skript gegen das Fenster ausführen kann, das sie geöffnet hat. Dieser Trick hat eine kurze Reichweite. GitHub entfernt das target-Attribut bei der Bereinigung, und jeder README-Link öffnet sich ohnehin im selben Tab. Der Kniff funktioniert in statischen Site-Generatoren wie Hugo und Jekyll, die HTML unangetastet durchreichen, und genau dort zählt das Öffnen im neuen Tab am meisten.

Symbole und Sonderzeichen

Tippen Sie Symbole direkt ein, denn Markdown-Dateien sind reiner Unicode-Text, oder nutzen Sie HTML-Entitäten, wenn ein Symbol über die Tastatur schwer erreichbar ist. Kopieren Sie © oder → von einer beliebigen Zeichenreferenz-Seite und fügen Sie es in die Datei ein; es wird unverändert dargestellt.

SymbolHTML-Entität
© Copyright&copy;
® eingetragene Marke&reg;
™ Marke&trade;
→ Pfeil nach rechts&rarr;
° Grad&#176;
€ Euro&euro;

Entitäten werden in fast jedem Renderer umgewandelt, GitHub eingeschlossen. Die eine Falle sind Codeblöcke, in denen &copy; wörtlich erscheint, weil umzäunter Code die Entitäten-Dekodierung abschaltet.

Inhaltsverzeichnis

Bauen Sie ein Inhaltsverzeichnis als Aufzählungsliste mit Links, die auf die Anker-IDs der Überschriften zeigen. GitHub, GitLab und die meisten anderen Renderer erzeugen für jede Überschrift eine ID: Der Text wird kleingeschrieben, Leerzeichen werden zu Bindestrichen, und die meisten Satzzeichen entfallen.

- [Underline Text](#underline-text)
- [Resize Images](#resize-images)
- [Embed Videos](#embed-videos)

Eine Überschrift namens "Resize Images" erhält den Anker #resize-images. GitHub blendet seit 2021 zudem einen automatischen Inhaltsverzeichnis-Button über README-Überschriften ein, eine manuelle Liste lohnt sich also vor allem in langen Dokumenten auf anderen Plattformen. Prüfen Sie die Anker nach jeder Überschriftenänderung, denn eine umbenannte Überschrift bricht ihre Links ohne Warnung.

Videos einbetten

Markdown kann keinen Videoplayer einbetten; verlinken Sie stattdessen ein klickbares Vorschaubild mit dem Video. YouTube veröffentlicht für jedes Video ein Vorschaubild unter einer vorhersagbaren URL, was das Muster einfach macht.

[![How markdown parsing works](https://img.youtube.com/vi/VIDEO-ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO-ID)

Ersetzen Sie VIDEO-ID durch den 11-stelligen Code aus der Video-URL. Das Vorschaubild wird überall gerendert, wo Standard-Markdown funktioniert, und ein Klick öffnet das Video auf YouTube. Zwei Ausbaustufen existieren dort, wo die Plattform sie erlaubt. GitHub akzeptiert seit Mai 2021 direkte .mp4- und .mov-Uploads in Issues, Pull Requests, Diskussionen und Markdown-Dateien, und Renderer mit voller HTML-Unterstützung akzeptieren ein eingefügtes YouTube-<iframe>.

Häufig gestellte Fragen

Funktionieren Markdown-Tricks auf GitHub?

Einige ja. GitHub behält <ins>, width-Attribute an <img>, <figure>, HTML-Kommentare, Entitäten und die eigene Alert-Syntax, entfernt aber jedes style-Attribut und das target-Attribut. Testen Sie jeden Trick in einem Entwurfs-Gist, bevor Sie sich darauf verlassen, denn die Whitelist des Sanitizers kann sich ohne Ankündigung ändern.

Warum ist mein HTML aus der gerenderten Seite verschwunden?

Der Renderer blockiert entweder Inline-HTML komplett, wie es Reddit und Discord tun, oder er hat das konkrete Tag oder Attribut bei der Bereinigung entfernt. Prüfen Sie die Dokumentation der Plattform auf eine Whitelist und tauschen Sie das entfernte Element gegen ein erlaubtes aus, etwa <div align="center"> anstelle eines style-Attributs.

Welcher Kommentarstil ist besser, [comment]: # oder <!-- -->?

Nutzen Sie [comment]: #, wenn die Notiz vollständig verschwinden muss, und <!-- -->, wenn die Lesbarkeit des Quelltexts wichtiger ist. Die Klammerform wird vom Markdown-Parser verbraucht und erreicht die Ausgabe nie, während ein gewöhnlicher HTML-Kommentar für jeden sichtbar bleibt, der den Quelltext der Seite aufruft.

Kostenlosen Online-Markdown-Editor ausprobieren

Schreiben Sie Markdown mit Live-Vorschau, öffnen Sie .md-Dateien und konvertieren Sie HTML, Word, PDF und Text – direkt im Browser.

Editor öffnen

Weitere Markdown-Anleitungen