Markdown-Spickzettel
Markdown ist eine Reihe von Konventionen zum Formatieren von Text in einer Klartextdatei, und sein Reiz liegt darin, dass der Quelltext auch ohne Rendering lesbar bleibt. Die Syntax unten ist nach dem organisiert, was du tun möchtest, und jede Zeile zeigt das HTML, das sie tatsächlich produziert.
Diese HTML-Fragmente werden nicht von Hand eingegeben. Jedes ist die echte Ausgabe des eigenen Markdown-Konverters dieser Website, die bei jedem Build mit der Tabelle verglichen wird – wenn eine Zeile und das Tool jemals unterschieden hätten, würde der Build fehlschlagen, statt die Seite zu täuschen.
Der Dialekt ist CommonMark plus die GitHub-Erweiterungen, die fast universell sind: Tabellen, Aufgabenlisten und Durchstreichung. Fußnoten, Definitionslisten und Direktiven fehlen absichtlich, denn eine Syntax zu dokumentieren, die dann im Konverter ein Klick entfernt nichts tut, ist schlimmer als sie wegzulassen.
Betonung und Inline-Code
9Inline-Syntax funktioniert innerhalb von Absätzen, Überschriften, Listenelementen und Tabellenzellen gleichermaßen.
| Syntax | Was es tut | HTML produziert |
|---|---|---|
| *italic* | Kursiv | <p><em>italic</em></p> |
| _italic_ | Kursiv, alternative FormIgnoriert innerhalb eines Wortes, also überlebt snake_case. | <p><em>italic</em></p> |
| **bold** | Fettdruck | <p><strong>bold</strong></p> |
| __bold__ | Fettdruck, alternative Form | <p><strong>bold</strong></p> |
| ***both*** | Fettdruck und Kursiv zusammen | <p><em><strong>both</strong></em></p> |
| ~~gone~~ | Durchstreichung | <p><del>gone</del></p> |
| `code` | Inline-Code – nichts drin wird interpretiert | <p><code>code</code></p> |
| ``a ` b`` | Inline-Code mit einem BacktickVerwende mehr Backticks draußen als drinnen erscheinen. | <p><code>a ` b</code></p> |
| \*not italic\* | Ein wörtliches Sternchen statt Betonung | <p>*not italic*</p> |
Überschriften
7Die Hash-Form ist die zu verwendende; die Unterlineform erreicht nur zwei Ebenen.
| Syntax | Was es tut | HTML produziert |
|---|---|---|
| # Heading | Ebene-1-Überschrift | <h1>Heading</h1> |
| ## Heading | Ebene-2-Überschrift | <h2>Heading</h2> |
| ### Heading | Ebene-3-Überschrift | <h3>Heading</h3> |
| ###### Heading | Ebene-6-Überschrift – die tiefste, die es gibt | <h6>Heading</h6> |
| Heading ======= | Ebene-1-Überschrift, unterstrichene Form | <h1>Heading</h1> |
| Heading ------- | Ebene-2-Überschrift, unterstrichene Form | <h2>Heading</h2> |
| ## Heading ## | Nachfolgende Hashes sind Dekoration und werden fallen gelassenDie Anzahl auf der rechten Seite wird ignoriert; nur die linke setzt die Ebene. | <h2>Heading</h2> |
Listen
7Um zwei Leerzeichen zum Verschachteln einrücken. Ein leere Zeile zwischen Elementen macht jedes ein Absatz.
| Syntax | Was es tut | HTML produziert |
|---|---|---|
| - one - two | Aufzählungsliste | <ul> <li>one</li> <li>two</li> </ul> |
| * one * two | Aufzählungsliste, alternatives Marker | <ul> <li>one</li> <li>two</li> </ul> |
| 1. one 2. two | Nummerierte Liste | <ol> <li>one</li> <li>two</li> </ol> |
| 1. one 1. two | Auch eine nummerierte Liste, renummeriert bei RenderingNur die erste Zahl wird verwendet; der Rest kann alle 1 sein. | <ol> <li>one</li> <li>two</li> </ol> |
| - one - nested | Verschachtelte Liste – rücke das Kind um zwei Leerzeichen ein | <ul> <li>one <ul> <li>nested</li> </ul></li> </ul> |
| - [ ] todo | Nicht angehaktes Aufgabenlisten-Element | <ul> <li><input type="checkbox" disabled /> todo</li> </ul> |
| - [x] done | Angehaktes Aufgabenlisten-Element | <ul> <li><input type="checkbox" checked disabled /> done</li> </ul> |
Links und Bilder
6| Syntax | Was es tut | HTML produziert |
|---|---|---|
| [text](https://a.co) | Link | <p><a href="https://a.co">text</a></p> |
| [text](https://a.co "Tip") | Link mit einem Tooltip-Titel | <p><a href="https://a.co" title="Tip">text</a></p> |
| <https://a.co> | Bare URL wird zu einem Link | <p><a href="https://a.co">https://a.co</a></p> |
| [mail](mailto:a@b.co) | Email-Link | <p><a href="mailto:a@b.co">mail</a></p> |
|  | Bild, mit Alt-Text | <p><img src="cat.png" alt="alt" /></p> |
| [x](javascript:alert(1)) | Unsicheres Schema – der Link wird fallen gelassen, der Text bleibtjavascript:, data: und vbscript: URLs verlieren ihren href. | <p>x</p> |
Block elements
9Jede muss am Anfang einer Zeile beginnen.
| Syntax | Was es tut | HTML produziert |
|---|---|---|
| > quoted | Blockzitat | <blockquote> <p>quoted</p> </blockquote> |
| > > deeper | Verschachteltes Blockzitat | <blockquote> <blockquote> <p>deeper</p> </blockquote> </blockquote> |
| ``` code ``` | Code-Block mit Umgrenzung | <pre><code>code </code></pre> |
| ```js let a = 1; ``` | Code-Block mit Umgrenzung mit einer Sprachen-Klasse zum Hervorheben | <pre><code class="language-js">let a = 1; </code></pre> |
| code | Code-Block durch Vier-Leerzeichen-Einzug | <pre><code>code </code></pre> |
| --- | Horizontale Regel | <hr /> |
| *** | Horizontale Regel, alternative Form | <hr /> |
| one two | Zeilenumbruch innerhalb eines AbsatzesZwei nachfolgende Leerzeichen. Unsichtbar in den meisten Editoren, weshalb es so oft fehlschlägt. | <p>one<br /> two</p> |
| one two | Ein leere Zeile trennt Absätze | <p>one</p> <p>two</p> |
Jede muss am Anfang einer Zeile beginnen.
4Die Trennzeile ist das, was es zu einer Tabelle macht. Ausrichtung wird durch Doppelpunkte in dieser Zeile gesetzt.
| Syntax | Was es tut | HTML produziert |
|---|---|---|
| | a | b | | - | - | | 1 | 2 | | Tabelle – Kopfzeile, Trennzeile, dann Body-Zeilen | |
| | :--- | | Die Spalte nach links ausrichten, in der Trennzeile | |
| | :---: | | Zentriere die Spalte | |
| | ---: | | Die Spalte rechts ausrichten |