Markdown Spickzettel: Vollständige Syntax-Anleitung

· 12 Min. Lesezeit

Inhaltsverzeichnis

Was ist Markdown?

Markdown ist eine leichtgewichtige Auszeichnungssprache, die 2004 von John Gruber und Aaron Swartz entwickelt wurde und revolutionierte, wie wir für das Web schreiben. Sie ermöglicht es Ihnen, Klartext mit einfacher, intuitiver Syntax zu formatieren, die sowohl menschenlesbar als auch maschinell analysierbar ist.

Im Gegensatz zu HTML, das ausführliche Tags und schließende Elemente erfordert, verwendet Markdown natürliche Symbole wie Sternchen, Rauten und Klammern. Dies macht das Schreiben schneller und den Quelltext auch ohne Rendering lesbar. Ein Markdown-Dokument sieht in seiner Rohform sauber und logisch aus, weshalb es zum universellen Standard für technische Dokumentation geworden ist.

Die Philosophie hinter Markdown ist einfach: Schreiben sollte einfach sein, und die Syntax sollte unsichtbar sein. Wenn Sie eine Markdown-Datei lesen, lesen Sie zuerst den Inhalt, dann die Auszeichnung. Dies unterscheidet sich grundlegend von traditionellen Auszeichnungssprachen, bei denen Tags oft den eigentlichen Inhalt verdecken.

Wo Markdown verwendet wird

Markdown ist im gesamten Tech-Ökosystem und darüber hinaus allgegenwärtig geworden:

Müssen Sie Ihr Markdown für die Webveröffentlichung in HTML konvertieren? Probieren Sie unseren Markdown zu HTML Konverter für sofortige, präzise Konvertierung.

Profi-Tipp: Markdown-Dateien verwenden die Erweiterung .md oder .markdown. Die meisten Plattformen erkennen beide, aber .md ist gebräuchlicher und prägnanter.

Überschriften und Dokumentstruktur

Überschriften sind das Rückgrat der Dokumentstruktur in Markdown. Sie schaffen Hierarchie, verbessern die Lesbarkeit und helfen sowohl Menschen als auch Suchmaschinen, Ihre Inhaltsorganisation zu verstehen.

Grundlegende Überschriften-Syntax

Markdown unterstützt sechs Ebenen von Überschriften mit Raute-Symbolen (#). Die Anzahl der Rauten bestimmt die Überschriftenebene:

# Überschrift 1 (H1)
## Überschrift 2 (H2)
### Überschrift 3 (H3)
#### Überschrift 4 (H4)
##### Überschrift 5 (H5)
###### Überschrift 6 (H6)

Jede Überschriftenebene hat semantische Bedeutung. H1 ist Ihr Dokumenttitel, H2s sind Hauptabschnitte, H3s sind Unterabschnitte und so weiter. Diese Hierarchie ist entscheidend für Barrierefreiheit und SEO.

Alternative Syntax für H1 und H2

Markdown unterstützt auch eine alternative "Unterstreichungs"-Syntax für H1- und H2-Überschriften:

Überschrift 1
=============

Überschrift 2
-------------

Obwohl diese Syntax gültig ist, ist die Raute-Syntax gebräuchlicher und unterstützt alle sechs Überschriftenebenen. Die meisten Entwickler bevorzugen die Konsistenz der Verwendung von Rauten in ihren gesamten Dokumenten.

Best Practices für Überschriften

Schneller Tipp: Viele Markdown-Parser generieren automatisch Anker-Links aus Überschriften und konvertieren "Erste Schritte" zu #erste-schritte. Dies ermöglicht Deep-Linking zu bestimmten Abschnitten.

Textformatierung und Hervorhebung

Markdown bietet intuitive Syntax für gängige Textformatierungsbedürfnisse. Diese Formatierungsoptionen funktionieren inline innerhalb von Absätzen und können für komplexere Gestaltung kombiniert werden.

Fetter und kursiver Text

Hervorhebung wird mit Sternchen oder Unterstrichen erstellt:

**Fetter Text** oder __Fetter Text__
*Kursiver Text* oder _Kursiver Text_
***Fett und kursiv*** oder ___Fett und kursiv___

Sowohl Sternchen als auch Unterstriche funktionieren identisch, aber Sternchen sind gebräuchlicher. Wählen Sie einen Stil und bleiben Sie dabei für Konsistenz. Viele Styleguides empfehlen Sternchen, weil sie einfacher zu tippen und visuell deutlicher sind.

Durchgestrichen und andere Formatierung

Zusätzliche Formatierungsoptionen umfassen:

~~Durchgestrichener Text~~
`Inline-Code`
==Hervorgehobener Text== (einige Parser)
X^2^ (hochgestellt, einige Parser)
H~2~O (tiefgestellt, einige Parser)

Beachten Sie, dass hervorgehobener Text, Hoch- und Tiefstellung Erweiterungen sind, die nicht von allen Markdown-Parsern unterstützt werden. GitHub Flavored Markdown (GFM) unterstützt Durchstreichung, aber standardmäßig keine Hervorhebung.

Blockzitate

Blockzitate werden mit dem Größer-als-Symbol (>) erstellt:

> Dies ist ein Blockzitat.
> Es kann mehrere Zeilen umfassen.

>> Verschachtelte Blockzitate sind ebenfalls möglich.
>> Fügen Sie einfach mehr > Symbole hinzu.

Blockzitate sind perfekt für Zitate, Pull-Quotes oder zum Hervorheben wichtiger Informationen. Sie können andere Markdown-Formatierungen enthalten, einschließlich Überschriften, Listen und Codeblöcken.

Horizontale Linien

Erstellen Sie visuelle Unterbrechungen in Ihrem Inhalt mit horizontalen Linien:

---
***
___

Alle drei Syntaxen erzeugen das gleiche Ergebnis. Verwenden Sie drei oder mehr Bindestriche, Sternchen oder Unterstriche in einer eigenen Zeile. Die meisten Entwickler bevorzugen Bindestriche (---) für Klarheit.

Sonderzeichen maskieren

Um literale Markdown-Zeichen anzuzeigen, maskieren Sie sie mit einem Backslash:

\*Nicht kursiv\*
\# Keine Überschrift
\[Kein Link\]

Dies ist unerlässlich, wenn Sie die Markdown-Syntax selbst zeigen müssen, wie in Dokumentation oder Tutorials.

Profi-Tipp: Wenn Sie über Code oder technische Themen schreiben, verwenden Sie Inline-Code-Formatierung (`Backticks`) für Funktionsnamen, Variablen, Dateipfade und Befehle. Dies verbessert die Lesbarkeit und hilft Lesern, Code von Prosa zu unterscheiden.

Links und Bilder verwenden ähnliche Syntax in Markdown, was sie leicht zu merken und zu verwenden macht. Beide unterstützen Inline- und Referenz-Stil-Formate für verschiedene Anwendungsfälle.

Links erstellen

Die grundlegende Link-Syntax ist unkompliziert:

[Linktext](https://example.com)
[Link mit Titel](https://example.com "Hover-Text")

Der Linktext erscheint in eckigen Klammern, gefolgt unmittelbar von der URL in runden Klammern. Das optionale Titel-Attribut erscheint in Anführungszeichen nach der URL und wird beim Hovern angezeigt.

Referenz-Stil-Links

Für Dokumente mit vielen wiederholten Links halten Referenz-Stil-Links Ihren Inhalt sauberer:

[Linktext][referenz-id]
[Anderer Link][referenz-id]

[referenz-id]: https://example.com "Optionaler Titel"

Dieser Ansatz trennt Link-Definitionen vom Inhalt und macht die Quelle lesbarer. Er ist besonders nützlich in langen Dokumenten oder wenn dieselbe URL mehrmals vorkommt.

Automatische Links

URLs und E-Mail-Adressen können automatisch in Links konvertiert werden:

<https://example.com>
<[email protected]>

Viele Markdown-Parser verlinken auch nackte URLs ohne spitze Klammern automatisch, aber dieses Verhalten ist nicht universell. Die Verwendung spitzer Klammern gewährleistet konsistentes Verhalten über Plattformen hinweg.

Bilder hinzufügen

Die Bild-Syntax ist nahezu identisch mit Links, mit einem Ausrufezeichen-Präfix:

![Alt-Text](bild.jpg)
![Alt-Text](bild.jpg "Bildtitel")
![Alt-Text][bild-referenz]

[bild-referenz]: bild.jpg "Optionaler Titel"

Der Alt-Text ist entscheidend für Barrierefreiheit und SEO. Er beschreibt das Bild für Screenreader und erscheint, wenn das Bild nicht geladen werden kann. Geben Sie immer aussagekräftigen Alt-Text an, der den Bildinhalt und -kontext beschreibt.

Bildgröße und Ausrichtung

Standard-Markdown unterstützt keine Bildgröße oder -ausrichtung. Sie müssen HTML für diese Funktionen verwenden:

<img src="bild.jpg" alt="Alt-Text" width="300">
<img src="bild.jpg" alt="Alt-Text" style="float:right;margin:10px">

Die meisten Markdown-Parser erlauben Inline-HTML, was dies zu einer praktischen Lösung macht, wenn Sie mehr Kontrolle über die Bilddarstellung benötigen.

Schneller Tipp: Wenn Sie auf interne Seiten verlinken, verwenden Sie relative URLs (/about/) anstelle von absoluten URLs (https://example.com/about/). Dies macht Ihren Inhalt portabel und funktioniert korrekt in Entwicklungsumgebungen.

Listen: Geordnet, ungeordnet und Aufgabenlisten

Listen sind grundlegend für die Organisation von Informationen in Markdown. Sie sind einfach zu erstellen und unterstützen Verschachtelung für komplexe Hierarchien.

Ungeordnete Listen

Erstellen Sie Aufzählungslisten mit Sternchen, Bindestrichen oder Pluszeichen:

* Punkt eins
* Punkt zwei
* Punkt drei

- Punkt eins
- Punkt zwei
- Punkt drei

+ Punkt eins
+ Punkt zwei
+ Punkt drei

Alle drei Symbole funktionieren identisch. Wählen Sie eines und verwenden Sie es konsistent in Ihrem gesamten Dokument. Die meisten Entwickler bevorzugen Bindestriche wegen ihrer visuellen Klarheit.

Geordnete Listen

Nummerierte Listen verwenden Zahlen gefolgt von Punkten:

1. Erster Punkt
2. Zweiter Punkt
3. Dritter Punkt

Hier ist eine nützliche Funktion: Die tatsächlichen Zahlen spielen keine Rolle. Markdown nummeriert Ihre Liste beim Rendern automatisch neu:

1. Erster Punkt
1. Zweiter Punkt
1. Dritter Punkt

Dies macht das Neuordnen von Punkten einfacher, da Sie nicht alles manuell neu nummerieren müssen. Allerdings kann es beim Lesen der Quelle verwirrend sein, für jeden Punkt mit 1. zu beginnen.

Verschachtelte Listen

Erstellen Sie hierarchische Listen, indem Sie Punkte mit Leerzeichen oder Tabs einrücken:

1. Erster Punkt
   - Verschachtelter Aufzählungspunkt
   - Weiterer verschachtelter Aufzählungspunkt
2. Zweiter Punkt
   1. Verschachtelte Nummer
   2. Weitere verschachtelte Nummer
      - Noch tiefere Verschachtelung

Verwenden Sie konsistente Einrückung (typischerweise 2-4 Leerzeichen) für jede Verschachtelungsebene. Die meisten Parser sind flexibel, aber Konsistenz verbessert die Lesbarkeit.

Aufgabenlisten

GitHub Flavored Markdown führte Aufgabenlisten zur Verfolgung von To-dos ein:

- [ ] Unerledigte Aufgabe
- [x] Erledigte Aufgabe
- [ ] Weitere unerledigte Aufgabe

Aufgabenlisten sind auf Plattformen wie GitHub interaktiv – Sie können Punkte direkt in der gerenderten Ansicht an- und abhaken. Sie sind perfekt für Projektplanung, Issue-Tracking und kollaborative Dokumente.

Best Practices für Listen

Code und Codeblöcke

Markdown zeichnet sich bei der Darstellung von Code aus und ist daher das bevorzugte Format für technische Dokumentation und Programmier-Tutorials.

Inline-Code

Umschließen Sie Inline-Code mit einfachen Backticks:

Verwenden Sie die Funktion `console.log()` zum Debuggen.
Das Element `<div>` ist ein Container.

Inline-Code-Formatierung bewahrt Abstände und verhindert Markdown-Interpretation. Sie ist unerlässlich für die Erwähnung von Code-Elementen innerhalb von Sätzen.

Codeblöcke

Erstellen Sie Codeblöcke mit dreifachen Backticks (umzäunte Codeblöcke):

```
function hello() {
  console.log("Hallo, Welt!");
}
```

Dies ist die moderne, bevorzugte Syntax. Sie ist sauberer und flexibler als die ältere Einrückungsmethode (4 Leerzeichen oder 1 Tab).

Syntax-Hervorhebung

Geben Sie die Programmiersprache nach den öffnenden Backticks für Syntax-Hervorhebung an:

```javascript
function hello() {
  console.log("Hallo, Welt!");
}
```

```python
def hello():
    print("Hallo, Welt!")
```

```css
.container {
  max-width: 1200px;
  margin: 0 auto;
}
```

Die meisten Markdown-Parser unterstützen Dutzende von Sprachen. Gängige Bezeichner umfassen

We use cookies for analytics. By continuing, you agree to our Privacy Policy.