Menu
Coddy logo textTech

Markdown Spickzettel

Zuletzt aktualisiert

Überschriften

Setz ein Leerzeichen hinter die #-Zeichen. Die Anzahl der Zeichen bestimmt die Ebene, von 1 bis 6.

ElementMarkdownErgebnis
Überschrift 1# Page titleÜberschrift der obersten Ebene, <h1>
Überschrift 2## SectionAbschnittsüberschrift, <h2>
Überschrift 3### SubsectionUnterabschnittsüberschrift, <h3>
Überschriften 4 bis 6#### Level 4 ##### Level 5 ###### Level 6<h4>, <h5> und <h6>
Überschrift 1, alternativPage title ==========<h1>, dasselbe wie # Page title
Überschrift 2, alternativSection -------<h2>, dasselbe wie ## Section
Schließende Rauten## Section ##<h2>Section</h2>; #-Zeichen am Ende fallen weg
Fehlendes Leerzeichen#Not a headingEin normaler Absatz. Das Leerzeichen nach # ist Pflicht

Fett, kursiv und durchgestrichen

Sternchen funktionieren überall, sogar mitten im Wort. Unterstriche funktionieren nur an Wortgrenzen, deshalb bleibt snake_case so, wie es getippt ist.

ElementMarkdownErgebnis
Fett**bold text**Fett, <strong>bold text</strong>
Fett, Unterstriche__bold text__Fett, dasselbe wie oben
Kursiv*italic text*Kursiv, <em>italic text</em>
Kursiv, Unterstriche_italic text_Kursiv, dasselbe wie oben
Fett und kursiv***bold and italic***<em><strong>bold and italic</strong></em>
Fett mitten im Wortun**believ**ableNur die Mitte des Wortes ist fett
Unterstriche im Wortsnake_case_nameNormaler Text, nicht kursiv
Durchgestrichen (GFM)~~no longer true~~Durchgestrichen, <del>no longer true</del>
Unterstrichen<ins>underlined</ins>Unterstrichener Text. Markdown hat keine Syntax zum Unterstreichen, deshalb ist das HTML
Hervorheben<mark>highlighted</mark>Hervorgehobener Text, wo die Plattform das Tag <mark> erlaubt. Markdown hat keine Syntax zum Hervorheben

Zeilenumbrüche und Absätze

Einmal Enter innerhalb eines Absatzes beginnt in der Ausgabe keine neue Zeile. Nimm stattdessen eine dieser Varianten.

ElementMarkdownErgebnis
Neuer AbsatzFirst paragraph. Second paragraph.Zwei Absätze. Eine Leerzeile trennt sie
Umbruch: zwei LeerzeichenRoses are red, Violets are blue.Ein Absatz mit einem <br> nach red,. Die erste Zeile endet mit zwei Leerzeichen, die man nicht sieht
Umbruch: BackslashRoses are red,\ Violets are blue.Dasselbe <br>, mit einem sichtbaren Zeichen. Funktioniert in CommonMark und auf GitHub
Umbruch: HTMLRoses are red,<br>Violets are blue.Dasselbe <br>. Funktioniert auch in einer Tabellenzelle
Einfacher ZeilenumbruchRoses are red, Violets are blue.Eine Zeile: Roses are red, Violets are blue. GitHub-Issues und Kommentare behalten den Umbruch, .md-Dateien nicht
Zusätzliche LeerzeilenOne. Two.Dasselbe wie eine Leerzeile. Für mehr Abstand setz <br> in eine eigene Zeile

Listen

Rück einen verschachtelten Eintrag so ein, dass er mit dem Text des Eintrags darüber fluchtet: 2 Leerzeichen unter - , 3 Leerzeichen unter 1. .

ElementMarkdownErgebnis
Aufzählungsliste- Apples - Pears - PlumsEine Aufzählungsliste, <ul> mit drei <li>
Andere Aufzählungszeichen* Apples + Pears* und + erzeugen ebenfalls Aufzählungspunkte. Ein Wechsel des Zeichens beginnt eine neue Liste
Nummerierte Liste1. Install 2. Configure 3. RunEine nummerierte Liste, <ol>
Faule Nummerierung1. Install 1. Configure 1. RunTrotzdem als 1, 2, 3 nummeriert. Nur die erste Zahl zählt
Bei einer Zahl beginnen7. Seventh 8. Eighth<ol start="7">, ab 7 nummeriert
Verschachtelte Liste- Fruit - Apple - Pear - VegetablesEine Liste im ersten Eintrag
Verschachtelt, nummeriert1. Download - Windows - macOS 2. InstallAufzählungspunkte in Schritt 1, um 3 Leerzeichen eingerückt
Absatz in einem Eintrag- First item More about the first item. - Second itemZwei Absätze im ersten Eintrag
Code in einem Eintrag1. Run this: ```bash npm install ``` 2. Start the appEin Codeblock in Schritt 1, bis zum Text des Eintrags eingerückt

Aufgabenlisten (Checkboxen)

Eine Erweiterung von GitHub Flavored Markdown: Ein Listeneintrag, der mit [ ] oder [x] beginnt, wird zur Checkbox.

ElementMarkdownErgebnis
Leere Checkbox- [ ] Write testsEine nicht angehakte Checkbox
Angehakte Checkbox- [x] Write testsEine angehakte Checkbox. [X] funktioniert auch
Checkliste- [x] Draft - [ ] Review - [ ] PublishEin angehaktes Kästchen und zwei leere. In GitHub-Issues und Pull Requests kannst du sie per Klick anhaken
Verschachtelte Aufgaben- [ ] Release - [x] Tag the commit - [ ] Write the notesZwei Unteraufgaben unter dem ersten Kästchen
Fehlendes Leerzeichen- [] Write testsEin normaler Aufzählungspunkt mit dem Text [] Write tests. Die Klammern brauchen ein Leerzeichen oder ein x

Der Linktext steht in eckigen Klammern, die Adresse direkt danach in runden Klammern, ohne Leerzeichen dazwischen.

ElementMarkdownErgebnis
Inline-Link[Coddy](https://coddy.tech)<a href="https://coddy.tech">Coddy</a>
Link mit Titel[Coddy](https://coddy.tech "Learn to code")Derselbe Link. Der Titel erscheint beim Überfahren mit der Maus als Tooltip
URL in spitzen Klammern<https://coddy.tech>Die URL selbst, als Link
Nackte URL (GFM)https://coddy.techEin Link auf GitHub und anderen GFM-Plattformen, die auch www.-Adressen verlinken. In striktem CommonMark normaler Text
E-Mail-Link<hello@example.com>Ein mailto:-Link
Referenz-LinkRead the [docs][1]. [1]: https://example.com/docsdocs verlinkt auf die URL. Die Zeile [1]: wird nicht angezeigt
Kurze ReferenzSee [GitHub]. [GitHub]: https://github.comGitHub verlinkt auf die URL
Relativer Link[Install guide](docs/install.md)Ein Link auf eine Datei relativ zu dieser. Auf GitHub öffnet er die Datei im Repository
Link auf eine Überschrift[Jump to setup](#getting-started)Scrollt auf derselben Seite zu ## Getting Started
Überschriften-IDs## Getting Started!Bekommt auf GitHub die ID getting-started: Kleinbuchstaben, Leerzeichen werden zu Bindestrichen, Satzzeichen außer - und _ fallen weg
Überschrift in einer anderen Datei[Requirements](docs/install.md#requirements)Öffnet die Datei an dieser Überschrift
Leerzeichen in der URL[Report](my%20report.pdf)Schreib jedes Leerzeichen als %20 oder setz die URL in spitze Klammern: [Report](<my report.pdf>)
In neuem Tab öffnen<a href="https://coddy.tech" target="_blank">Coddy</a>Markdown hat dafür keine Syntax. Das HTML funktioniert dort, wo die Plattform das Attribut target beibehält

Bilder

Ein Bild ist ein Link mit einem ! davor. Der Text in den eckigen Klammern wird zum Alternativtext, den Screenreader vorlesen.

ElementMarkdownErgebnis
Bild![A cat asleep on a sofa](cat.png)<img src="cat.png" alt="A cat asleep on a sofa">
Bild mit Titel![Logo](logo.png "Coddy logo")Dasselbe Bild mit einem Tooltip beim Überfahren mit der Maus
Bild von einer URL![Build status](https://example.com/badge.svg)Lädt das Bild aus dem Web
Verlinktes Bild[![Logo](logo.png)](https://coddy.tech)Ein Bild, das beim Anklicken den Link öffnet
Referenz-Bild![Logo][logo] [logo]: images/logo.pngDasselbe wie ein Inline-Bild, mit der URL einmal weiter unten definiert
Bildgröße<img src="logo.png" alt="Logo" width="200">Das Bild, 200 Pixel breit. Einfaches Markdown hat keine Syntax für die Größe, deshalb ist das ein HTML-Tag <img>
Zentriertes Bild<p align="center"> <img src="logo.png" alt="Logo" width="200"> </p>Ein zentriertes Bild, wie in vielen README-Dateien auf GitHub

Code und Codeblöcke

Backticks markieren Code innerhalb einer Zeile; ein Zaun aus drei Backticks markiert einen Block. Innerhalb von Code wird nichts formatiert.

ElementMarkdownErgebnis
Inline-CodeRun `npm install` first.npm install in Festbreitenschrift, als <code>
Backtick in Code``Use `git` here``Der Code Use `git` here. Umschließ ihn mit mehr Backticks, als er selbst enthält
Codeblock``` npm install npm run dev ```Ein Block, <pre><code>, mit erhaltenen Zeilenumbrüchen
Syntaxhervorhebung```python def greet(name): return f"Hello, {name}" ```Ein Python-Block mit farbiger Syntax. Gängige Namen: js, ts, python, bash, json, html, css, sql
Tilden-Zaun~~~js console.log("hi"); ~~~Dasselbe wie ein Zaun aus Backticks
Eingerückter Code const total = 42;Ein Codeblock durch 4 Leerzeichen Einrückung, nach einer Leerzeile
Diff-Block```diff - const x = 1; + const x = 2; ```Auf GitHub entfernte Zeilen in Rot und hinzugefügte Zeilen in Grün
Zaun in einem Block````markdown ```js let a = 1; ``` ````Ein Block, der den inneren Zaun als Text zeigt. Der äußere Zaun braucht mehr Backticks als der innere

Tabellen

Eine Erweiterung von GitHub Flavored Markdown. Die zweite Zeile, die Trennzeile, macht die erste Zeile zur Kopfzeile. Sie muss genauso viele Zellen haben wie die Kopfzeile, sonst entsteht keine Tabelle.

ElementMarkdownErgebnis
Tabelle| Name | Role | | ----- | ------ | | Ada | Admin | | Linus | Editor |Eine Tabelle mit Kopfzeile und zwei Zeilen
Spaltenausrichtung| Left | Center | Right | | :--- | :----: | ----: | | a | b | c |Doppelpunkte legen die Ausrichtung fest: links, zentriert, rechts
Ohne äußere PipesName | Role --- | --- Ada | AdminDieselbe Tabelle. Die Pipes am Anfang und Ende einer Zeile sind optional
Spaltenbreite| a | b | |---|---| | 1 | 2 |Die Breiten ergeben sich aus dem Inhalt. Die Anzahl der Bindestriche spielt keine Rolle, und die Pipes müssen nicht untereinander stehen
Formatierung in Zellen| Command | Does | | --- | --- | | `git status` | Shows **changed** files |Code, Fett, Links und Bilder funktionieren alle in Zellen
Pipe in einer Zelle| Operator | Meaning | | --- | --- | | `a \| b` | a or b |Die Zelle zeigt a | b. Maskier die Pipe als \|, auch innerhalb von Code
Zeilenumbruch in einer Zelle| Step | Notes | | --- | --- | | 1 | First line<br>Second line |Zwei Zeilen in einer Zelle. Ein echter Zeilenumbruch würde die Zeile beenden
Verbundene Zellen<td colspan="2">Both columns</td>Markdown-Tabellen können keine Zellen verbinden. Schreib die Tabelle in HTML mit colspan oder rowspan

Zitate

Beginn jede Zeile mit >. Ein Zitat kann beliebiges anderes Markdown enthalten.

ElementMarkdownErgebnis
Zitat> Simple is better than complex.Ein eingerücktes Zitat, <blockquote>
Mehrere Absätze> First paragraph. > > Second paragraph.Ein Zitat mit zwei Absätzen. Die Zeile mit dem bloßen > hält sie zusammen
Verschachteltes Zitat> The reply >> The original messageEin Zitat in einem Zitat
Andere Elemente darin> #### Note > - Back up first > - Then upgradeEine Überschrift und eine Liste im Zitat
Hinweis (GitHub)> [!NOTE] > Requires Node 20 or later.Ein farbiger Note-Kasten auf GitHub. Die anderen Typen sind [!TIP], [!IMPORTANT], [!WARNING] und [!CAUTION]

Horizontale Linien

Drei oder mehr Bindestriche, Sternchen oder Unterstriche allein in einer Zeile ziehen eine Linie quer über die Seite.

ElementMarkdownErgebnis
Linie---Eine horizontale Linie, <hr>
Andere Formen*** ___Zwei weitere Linien
Linie nach TextSome text ---Ein Absatz, dann eine Linie. Behalte die Leerzeile
Fehlende LeerzeileSome text ---Eine Überschrift der Ebene 2, keine Linie: --- unter einer Textzeile unterstreicht sie

Fußnoten

Unterstützt auf GitHub, GitLab und in vielen Static-Site-Generatoren. Striktes CommonMark kennt keine Fußnoten.

ElementMarkdownErgebnis
FußnoteMarkdown dates from 2004.[^1] [^1]: John Gruber created it, with Aaron Swartz.Eine hochgestellte 1, die auf die Anmerkung verlinkt; die Anmerkung steht unten auf der Seite
Benannte FußnoteSee the spec.[^spec] [^spec]: https://spec.commonmark.orgBezeichner können Wörter sein, die Anmerkungen werden trotzdem in der Reihenfolge der Verwendung mit 1, 2, 3 nummeriert
Wo man sie definiert[^1]: The text of the note.Die Definition kann irgendwo in der Datei stehen. Sie wird immer am Ende gerendert

Zeichen maskieren (Escaping)

Ein Backslash vor einem Satzzeichen gibt das Zeichen selbst aus, statt zu formatieren.

ElementMarkdownErgebnis
Wörtliche Sternchen\*not italic\*Normaler Text mit den Sternchen: *not italic*
Wörtliche Raute\# Not a headingEin Absatz, der mit # beginnt
Zahl mit Punkt2024\. A good year.Ein Absatz, keine Liste, die bei 2024 beginnt
Wörtliche Klammern\[not a link\](page.md)Die eckigen und runden Klammern so, wie sie getippt sind
Wörtlicher Backtick\`Ein Backtick
Wörtlicher Backslash\\Ein Backslash
Was sich maskieren lässt\ ` * _ {} [] () <> # + - . ! |Jedes ASCII-Satzzeichen. Ein Backslash vor einem Buchstaben oder einer Ziffer bleibt ein Backslash
HTML-Entitäten&copy; 2026 &amp; &lt;div&gt;© 2026 & <div>, als Text
Kein Escaping in Code`*stars*`Der Code *stars* so, wie er getippt ist. In Code ist ein Backslash ein gewöhnliches Zeichen

HTML in Markdown

Die meisten Renderer reichen HTML durch, also deckt ein Tag ab, wofür Markdown keine Syntax hat. GitHub entfernt unsicheres HTML wie <script>, <style>, <iframe> und style-Attribute.

ElementMarkdownErgebnis
TastaturtastenPress <kbd>Ctrl</kbd> + <kbd>C</kbd>Ctrl und C als Tasten dargestellt
Tief- und HochstellungH<sub>2</sub>O and x<sup>2</sup>H₂O und x²
Ausklappbarer Abschnitt<details> <summary>Show the answer</summary> The answer is **42**. </details>Ein Abschnitt, der sich per Klick öffnet. Die Leerzeilen sorgen dafür, dass das Markdown darin gerendert wird
Markdown in einem HTML-Block<div> **not bold** </div>**not bold** so, wie es getippt ist. In einem HTML-Block wird Markdown erst gelesen, wenn eine Leerzeile den Block beendet
Farbiger Text<span style="color: red">red</span>Roter Text auf Plattformen, die Inline-Styles erlauben. GitHub entfernt das Attribut style

Kommentare

Markdown hat keine Syntax für Kommentare. Zwei Tricks halten Text von der gerenderten Seite fern.

ElementMarkdownErgebnis
Versteckter Kommentar[//]: # (This line is never shown)Nichts. Die Zeile ist eine Linkdefinition, die kein Link verwendet, und landet deshalb nie im HTML
Alternative Form[comment]: <> (Also hidden)Nichts, mit demselben Trick
HTML-Kommentar<!-- TODO: add screenshots -->Nichts auf der Seite, aber der Kommentar bleibt im HTML-Quelltext
Mehrzeiliger Kommentar<!-- This whole block is hidden -->Nichts auf der Seite
PlatzierungSome text. [//]: # (comment) More text.Zwei Absätze. Vor der Kommentarzeile muss eine Leerzeile stehen, sonst erscheint sie als Text

GitHub Flavored Markdown und GitHub-Extras

GitHub Flavored Markdown (GFM) ist CommonMark plus Tabellen, Aufgabenlisten, Durchstreichen und automatisch verlinkte URLs. GitHub legt noch mehr obendrauf.

FunktionMarkdownWo es funktioniert
Tabellen| a | b | | --- | --- | | 1 | 2 |GFM: GitHub, GitLab und die meisten Dokumentationswerkzeuge
Aufgabenlisten- [x] DoneGFM
Durchstreichen~~text~~GFM
Nackte URLs als Linkswww.coddy.techGFM
Code mit Sprachangabe```js let a = 1; ```CommonMark und GFM. Die Farben kommen von der Plattform
FußnotenText.[^1] [^1]: Note.GitHub und GitLab, obwohl nicht in der GFM-Spezifikation
Emoji:rocket: :tada:GitHub und GitLab machen aus Shortcodes Emoji
Erwähnungen@octocatGitHub: verlinkt den Benutzer und benachrichtigt ihn
Issue-Links#123GitHub: verlinkt Issue oder Pull Request 123 im selben Repository
Diagramme```mermaid graph LR A --> B ```GitHub und GitLab zeichnen ein Mermaid-Diagramm
Mathematik$E = mc^2$ $$ \sum_{i=1}^{n} i $$GitHub rendert LaTeX-Mathematik, inline zwischen $-Zeichen und als Block zwischen $$-Zeilen

Die gesamte Markdown-Syntax auf einer Seite, jeweils neben dem, was daraus wird. Dieser Markdown-Spickzettel deckt die Grundsyntax ab (Überschriften, Hervorhebung, Zeilenumbrüche, Listen, Links, Bilder, Code, Zitate) und die Erweiterungen von GitHub Flavored Markdown: Tabellen mit Ausrichtung, Aufgabenlisten, Durchstreichen, automatisch verlinkte URLs und Fußnoten, dazu Escaping, HTML und Kommentare.

Die Beispiele folgen CommonMark und GitHub Flavored Markdown, den Regeln, auf denen GitHub, GitLab und die meisten Dokumentationswerkzeuge aufbauen. Wo sich eine Plattform anders verhält, steht es in der Zeile. Um ein Beispiel beim Tippen gerendert zu sehen, füg es in den Markdown-Editor ein.

FAQ zum Markdown-Spickzettel

Wie erstelle ich eine Tabelle in Markdown?
Schreib die Kopfzeile mit Zellen zwischen Pipes, dann eine Trennzeile aus Bindestrichen, dann eine Zeile pro Tabellenzeile: | Name | Role |, | --- | --- |, | Ada | Admin |. Doppelpunkte in der Trennzeile richten eine Spalte aus: :--- links, :---: zentriert, ---: rechts. Tabellen sind eine Funktion von GitHub Flavored Markdown und funktionieren deshalb auf GitHub, GitLab und in den meisten Dokumentationswerkzeugen, aber nicht in striktem CommonMark.
Wie mache ich einen Zeilenumbruch in Markdown?
Ein einzelner Zeilenumbruch innerhalb eines Absatzes wird in der Ausgabe ignoriert. Um einen Zeilenumbruch zu erzwingen, beende die Zeile mit zwei Leerzeichen oder einem Backslash (\) oder schreib <br>. Für einen neuen Absatz lass eine Leerzeile. GitHub-Issues und Kommentare sind die Ausnahme: Dort erscheint schon ein einzelner Zeilenumbruch als Umbruch.
Wie schreibe ich einen Kommentar in Markdown?
Markdown hat keine Syntax für Kommentare, aber zwei Tricks funktionieren. [//]: # (your comment) in einer eigenen Zeile, mit einer Leerzeile davor, ist eine Linkdefinition, die nichts verwendet, und landet deshalb weder auf der Seite noch im HTML. Ein HTML-Kommentar, <!-- your comment -->, ist auf der Seite ebenfalls unsichtbar, bleibt aber im HTML-Quelltext, wo ihn jeder lesen kann, der sich den Quelltext ansieht.
Wie erstelle ich einen Codeblock in Markdown?
Setz drei Backticks in die Zeile vor dem Code und drei in die Zeile danach. Schreib einen Sprachnamen hinter die öffnenden Backticks, etwa ```python, um Syntaxhervorhebung zu bekommen. Für Code mitten im Satz umschließ ihn mit einfachen Backticks: `npm install`.
Wie füge ich eine Checkbox in Markdown ein?
Beginn einen Listeneintrag mit [ ] für ein leeres Kästchen oder [x] für ein angehaktes: - [ ] Review oder - [x] Draft. Lass das Leerzeichen in den leeren Klammern stehen. Checkboxen gehören zu GitHub Flavored Markdown, und in GitHub-Issues und Pull Requests kannst du sie per Klick anhaken.
Wie ändere ich die Größe eines Bildes in Markdown?
Einfaches Markdown hat keine Syntax für die Größe: ![alt text](image.png) zeigt das Bild immer in seiner eigenen Größe. Nimm stattdessen ein HTML-Tag wie <img src="image.png" alt="alt text" width="300">, das GitHub und die meisten Renderer akzeptieren. Setz nur die Breite oder nur die Höhe, damit die Proportionen erhalten bleiben.
Wie verlinke ich in Markdown auf eine Überschrift?
Verlinke mit # auf die ID der Überschrift: [Setup](#getting-started) springt zu ## Getting Started. GitHub bildet die ID aus dem Text der Überschrift in Kleinbuchstaben, wobei Leerzeichen zu Bindestrichen werden und Satzzeichen außer Bindestrichen und Unterstrichen wegfallen. Für eine Überschrift in einer anderen Datei setz die ID hinter den Dateinamen: [Setup](docs/install.md#getting-started).
Was ist eine .md-Datei?
Eine reine Textdatei, die in Markdown geschrieben ist. .md und .markdown sind die üblichen Endungen, und README.md ist die Datei, die GitHub auf der Startseite eines Repositorys anzeigt. Jeder Texteditor öffnet sie; GitHub, Dokumentationsseiten und Markdown-Viewer stellen sie als formatierten Text dar. Um eine Datei beim Bearbeiten gerendert zu sehen, füg sie in den Markdown-Editor ein.
Coddy programming languages illustration

Lerne Markdown mit Coddy

LOS GEHT'S