Markdown Guide für Blogger

Markdown Guide für Blogger

Markdown ist die perfekte Sprache für das Schreiben von Blog-Posts. Dieser Guide zeigt dir alles, was du wissen musst.

Warum Markdown?

Markdown ist:

• Einfach - Leicht zu lernen und zu lesen
• Schnell - Keine komplizierte Formatierung
• Portabel - Funktioniert überall
• Fokussiert - Konzentriere dich auf den Inhalt

Grundlegende Syntax

Überschriften

# H1 - Hauptüberschrift
## H2 - Unterüberschrift
### H3 - Sub-Unterüberschrift

Textformatierung

• Fett: **Text** → Text
• Kursiv: *Text* → Text
• Fett und Kursiv: ***Text*** → Text
• Durchgestrichen: ~~Text~~ → Text

Listen

Unsortierte Liste:

- Punkt 1
- Punkt 2
  - Unterpunkt 2.1
  - Unterpunkt 2.2

Sortierte Liste:

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

Links und Bilder

[Link-Text](https://example.com)
![Bild Alt-Text](bild.jpg)

Fortgeschrittene Features

Code

Inline-Code: `code`

Code-Block mit Syntax-Highlighting:

```python
def hello():
    print("Hello, World!")
```

Tabellen

| Spalte 1 | Spalte 2 | Spalte 3 |
|----------|----------|----------|
| Wert 1   | Wert 2   | Wert 3   |

Ergebnis:

Zitate

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

Dies ist ein Zitat. Es kann mehrere Zeilen umfassen.

Aufgabenlisten

- [x] Erledigte Aufgabe
- [ ] Offene Aufgabe
- [ ] Weitere Aufgabe

• Erledigte Aufgabe
• Offene Aufgabe
• Weitere Aufgabe

Hugo-spezifische Features

Front Matter

Jeder Hugo-Post beginnt mit Front Matter:

---
title: "Titel des Posts"
date: 2025-02-01
draft: false
tags: ["tag1", "tag2"]
categories: ["kategorie"]
---

Shortcodes

Hugo erweitert Markdown mit Shortcodes:

{{< highlight python >}}
print("Hello, World!")
{{< /highlight >}}

Interne Links

Verlinke auf andere Seiten:

[Über mich]({{< ref "/about" >}})

Best Practices

1. Überschriften-Hierarchie

Nutze Überschriften hierarchisch:

# H1 - Nur einmal pro Seite (Titel)
## H2 - Hauptabschnitte
### H3 - Unterabschnitte

2. Leerzeilen

Füge Leerzeilen für bessere Lesbarkeit hinzu:

## Überschrift

Erster Absatz mit Text.

Zweiter Absatz mit mehr Text.

3. Code formatieren

Nutze Syntax-Highlighting:

```javascript
function example() {
    return true;
}
```

4. Alt-Text für Bilder

Immer Alt-Text angeben für Barrierefreiheit:

![Beschreibung des Bildes](bild.jpg)

Markdown-Editoren

Online

• StackEdit
• Dillinger

Desktop

• Typora
• Mark Text
• VS Code mit Markdown-Extensions

Mobile

• iA Writer (iOS/Android)
• Obsidian (iOS/Android)

Cheat Sheet

Ressourcen

• Markdown Guide
• CommonMark Spec
• GitHub Flavored Markdown

Fazit

Markdown macht das Schreiben einfach und angenehm. Mit diesem Guide bist du bestens gerüstet!

Happy Writing! 📝