GitHub Flavored Markdown (GFM)

GitHub Flavored Markdown (GFM) ist GitHub's verbesserte Version von Markdown mit zusätzlichen Funktionen, die speziell für Softwareentwicklung und Zusammenarbeit entwickelt wurden. Dieser Leitfaden behandelt alle speziellen Syntaxerweiterungen, die auf GitHub verfügbar sind.

Was ist GitHub Flavored Markdown (GFM)?

GitHub Flavored Markdown erweitert die grundlegende Markdown-Syntax mit Funktionen, die es nützlicher machen für:

• Dokumentation (READMEs, Wikis)
• Issue-Tracking
• Pull Requests
• Code-Review
• Projektmanagement

Kern-GFM-Funktionen

1. Eingezäunte Code-Blöcke

GFM unterstützt eingezäunte Code-Blöcke mit sprachspezifischer Syntaxhervorhebung:

```javascript
function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

const result = calculateSum([1, 2, 3, 4, 5]);
console.log(result); // Output: 15
```

function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

const result = calculateSum([1, 2, 3, 4, 5]);
console.log(result); // Output: 15

2. Syntaxhervorhebung

GitHub unterstützt Syntaxhervorhebung für Hunderte von Sprachen. Einige gängige sind:

# Bash-Skript
echo "Hello GitHub!"

# Python-Skript
def greet(name):
    return f"Hello, {name}!"

// Java-Code
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello GitHub!");
    }
}

3. Aufgabenlisten

Erstellen Sie interaktive Aufgabenlisten mit Kontrollkästchen:

- [x] Benutzerauthentifizierung abschließen
- [x] API-Endpunkte implementieren
- [ ] Unit-Tests schreiben
  - [ ] Backend-Tests
  - [ ] Frontend-Tests
- [ ] In Produktion bereitstellen

• [x] Benutzerauthentifizierung abschließen
• [x] API-Endpunkte implementieren
• [ ] Unit-Tests schreiben
  • [ ] Backend-Tests
  • [ ] Frontend-Tests
• [ ] In Produktion bereitstellen

4. Tabellen

GFM bietet eine einfache Syntax zum Erstellen von Tabellen:

| Funktion        | Unterstützt | Beschreibung                  |
|-----------------|-------------|-------------------------------|
| Fenced Code     | ✅          | Sprachspezifische Hervorhebung|
| Task Lists      | ✅          | Interaktive Kontrollkästchen  |
| Tables          | ✅          | Strukturierte Datenanzeige    |
| Mentions        | ✅          | Benutzer- und Team-Benachrichtigungen|
| Emoji           | ✅          | Visuelle Ausdrücke            |

Funktion	Unterstützt	Beschreibung
Fenced Code	✅	Sprachspezifische Hervorhebung
Task Lists	✅	Interaktive Kontrollkästchen
Tables	✅	Strukturierte Datenanzeige
Mentions	✅	Benutzer- und Team-Benachrichtigungen
Emoji	✅	Visuelle Ausdrücke

5. Erwähnungen

Erwähnen Sie Benutzer oder Teams, um sie zu benachrichtigen:

@username - Einen bestimmten Benutzer erwähnen
@team-name - Ein Team erwähnen

6. Emoji

Fügen Sie Emoji mit Shortcodes hinzu:

:smile: - 😊
:thumbsup: - 👍
:heart: - ❤️
:rocket: - 🚀
:warning: - ⚠️

😄 - 😊 👍 - 👍 ❤️ - ❤️ 🚀 - 🚀 ⚠️ - ⚠️

7. Automatische Verlinkung

GFM verlinkt bestimmte Inhaltstypen automatisch:

Issue- und Pull-Request-Nummern

#123 - Verlinkt zu Issue 123
PR #456 - Verlinkt zu Pull Request 456

SHA-Hashes

a1b2c3d - Verlinkt zum Commit mit diesem SHA

Benutzererwähnungen in Issues/PRs

@username - Verlinkt automatisch zum Benutzerprofil

URLs

https://github.com - Wird automatisch zu einem Link

8. Durchgestrichener Text

GFM unterstützt durchgestrichenen Text:

~~Dieser Text ist durchgestrichen~~

Dieser Text ist durchgestrichen

9. Autolink-Referenzen

GFM erstellt automatisch Links für:

• HTTP/HTTPS-URLs
• E-Mail-Adressen
• GitHub-Issue/PR-Nummern
• Commit-SHAs

https://github.com/markdownlang/markdownlang.com
user@example.com
#123
PR #456
a1b2c3d4e5f6

10. Code-Block-Zeilenhervorhebung

Heben Sie bestimmte Zeilen in Code-Blöcken hervor:

```javascript{2,4}
function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0); // Highlighted
}

const result = calculateSum([1, 2, 3, 4, 5]); // Highlighted
console.log(result);
```

function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0); // Highlighted
}

const result = calculateSum([1, 2, 3, 4, 5]); // Highlighted
console.log(result);

11. Diff-Syntaxhervorhebung

Heben Sie Code-Änderungen mit Diff-Syntax hervor:

```diff
- const oldFunction = () => {
-   return "old value";
- };
+
+ const newFunction = () => {
+   return "new value";
+ };
```

- const oldFunction = () => {
-   return "old value";
- };
+
+ const newFunction = () => {
+   return "new value";
+ };

12. GitHub-spezifisches Markup

Warnungen

Verwenden Sie spezielle Syntax für Warnungen in GitHub-Dokumenten:

> [!NOTE]
> Dies ist eine Notiz-Warnung.

> [!TIP]
> Dies ist eine Tipp-Warnung.

> [!IMPORTANT]
> Dies ist eine wichtige Warnung.

> [!WARNING]
> Dies ist eine Warnung-Warnung.

> [!CAUTION]
> Dies ist eine Vorsicht-Warnung.

NOTE

Dies ist eine Notiz-Warnung.

TIP

Dies ist eine Tipp-Warnung.

IMPORTANT

Dies ist eine wichtige Warnung.

WARNING

Dies ist eine Warnung-Warnung.

CAUTION

Dies ist eine Vorsicht-Warnung.

Relative Links

Verwenden Sie relative Links, um zwischen Dateien im gleichen Repository zu navigieren:

[README](/de/README.md)
[Beitragsrichtlinien](/de/CONTRIBUTING.md)
[API-Dokumentation](/de/docs/api.md)

Bildlinks mit Hover-Text

![GitHub Logo](/de/images/github-logo.png "GitHub Logo - Hover-Text")

Fortgeschrittene GFM-Nutzung

1. Verschachtelte Listen mit Aufgabenlisten

Kombinieren Sie verschachtelte Listen mit Aufgabenlisten:

## Projekt-Roadmap

### Phase 1: Planung
- [x] Projektumfang definieren
- [x] Anforderungen identifizieren
  - [x] Funktionale Anforderungen
  - [x] Nicht-funktionale Anforderungen
- [x] Zeitplan erstellen

### Phase 2: Entwicklung
- [x] Projektstruktur einrichten
- [ ] Kernfunktionen implementieren
  - [x] Authentifizierung
  - [ ] Dashboard
  - [ ] API-Integration

2. Tabellen mit Emoji und Links

Verbessern Sie Tabellen mit Emoji und Links:

| Komponente   | Status              | Betreuer     |
|--------------|---------------------|--------------|
| Authentifizierung | ✅ Stabil       | @johndoe     |
| Datenbank    | ⚠️ Aktualisierung erforderlich | @janedoe |
| API          | 🚧 In Arbeit        | @bobsmith    |
| UI           | ✅ Stabil           | @alicesmith  |

Komponente	Status	Betreuer
Authentifizierung	✅ Stabil	@johndoe
Datenbank	⚠️ Aktualisierung erforderlich	@janedoe
API	🚧 In Arbeit	@bobsmith
UI	✅ Stabil	@alicesmith

3. Code-Blöcke in Listen

Fügen Sie Code-Blöcke innerhalb von Listen ein:

1. Abhängigkeiten installieren:

   ```bash
   npm install

2. Entwicklungsserver starten:

   npm run dev

3. Für Produktion bauen:

   npm run build

### 4. Zitat-Blöcke mit Code

Kombinieren Sie Zitate mit Code-Blöcken:

```markdown
> **Profi-Tipp:** Verwenden Sie den folgenden Befehl, um schnell Ihren Git-Status zu überprüfen:
>
> ```bash
> git status
> ```

Profi-Tipp: Verwenden Sie den folgenden Befehl, um schnell Ihren Git-Status zu überprüfen:

git status

GFM in verschiedenen GitHub-Kontexten

README-Dateien

README-Dateien unterstützen alle GFM-Funktionen und werden automatisch auf Repository-Seiten gerendert.

Issues und Pull Requests

• Verwenden Sie Aufgabenlisten zur Verfolgung des Fortschritts
• Erwähnen Sie Teammitglieder für Zusammenarbeit
• Fügen Sie Code-Snippets mit Syntaxhervorhebung ein
• Verweisen Sie auf verwandte Issues/PRs mit #123-Syntax

Kommentare

• Verwenden Sie Emoji für schnelle Reaktionen
• Verweisen Sie auf Zeilen im Code mit Zeilenkommentaren
• Verwenden Sie Zitat-Blöcke, um auf bestimmte Punkte zu antworten

Wikis

• Organisieren Sie Inhalte mit verschachtelten Seiten
• Verwenden Sie Tabellen für strukturierte Daten
• Fügen Sie Code-Beispiele mit Syntaxhervorhebung ein

Best Practices

1. Code-Stil

<!-- ✅ Gut -->
```javascript
// Verwenden Sie beschreibende Funktionsnamen
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

function f(i){return i.reduce((a,b)=>a+b.p,0)}```

2. Tabellen-Design

<!-- ✅ Gut -->
| Funktion | Beschreibung | Status |
|----------|--------------|--------|
| Funktion 1 | Kurze Beschreibung | ✅ |
| Funktion 2 | Andere Beschreibung | 🚧 |

<!-- ❌ Vermeiden -->
| Funktion | Beschreibung | Status | | | |
|----------|--------------|--------|---|---|---|
| Funktion 1 | Diese Beschreibung ist viel zu lang und macht die Tabelle auf mobilen Geräten schwer lesbar | ✅ | | | |

3. Aufgabenlisten-Nutzung

<!-- ✅ Gut -->
## Sprint Backlog
- [x] Benutzer-Profilseite abschließen
- [ ] Suchfunktion implementieren
  - [x] Backend-API
  - [ ] Frontend-Komponente
- [ ] Dokumentation schreiben

<!-- ❌ Vermeiden -->
- [ ] Aufgabe 1
- [ ] Aufgabe 2
- [ ] Aufgabe 3
- [ ] Aufgabe 4
- [ ] Aufgabe 5
(Zu viele Aufgaben ohne Organisation)

GFM vs. Standard-Markdown

Funktion	Standard-Markdown	GitHub Flavored Markdown
Eingezäunte Code-Blöcke	❌	✅
Syntaxhervorhebung	❌	✅
Aufgabenlisten	❌	✅
Tabellen	❌	✅
Durchgestrichener Text	❌	✅
Emoji	❌	✅
Erwähnungen	❌	✅
Automatische Verlinkung	Begrenzt	Umfangreich

Tools für die Arbeit mit GFM

Lokale Editoren

• Visual Studio Code - GFM-Vorschau und Erweiterungen
• Typora - Echtzeit-GFM-Rendering
• Mark Text - GFM-Unterstützung

Online-Tools

• GitHub Gist - Erstellen und Teilen von GFM-Snippets
• Dillinger - Online-GFM-Editor
• StackEdit - GFM-Unterstützung mit Cloud-Sync

Befehlszeilen-Tools

• glow - Terminal-GFM-Renderer
• pandoc - GFM in andere Formate konvertieren
• marked - Node.js-GFM-Parser

Häufige Probleme und Lösungen

1. Code-Block wird nicht hervorgehoben

Problem: Code-Block zeigt keine Syntaxhervorhebung

Lösung: Stellen Sie sicher, dass Sie die richtige Sprache angeben:

<!-- ✅ Korrekt -->
```javascript
console.log("Hello");

console.log("Hello"); // Verwendung von jsx statt javascript für Nicht-JSX-Code

### 2. Aufgabenlisten-Kontrollkästchen funktionieren nicht

**Problem:** Aufgabenlisten-Kontrollkästchen sind nicht interaktiv

**Lösung:** Stellen Sie sicher, dass Sie die richtige Syntax verwenden (Leerzeichen zwischen `-` und `[ ]`):

```markdown
<!-- ✅ Korrekt -->
- [ ] Aufgabe

<!-- ❌ Falsch -->
-[ ] Aufgabe (kein Leerzeichen)
-[x] Aufgabe (kein Leerzeichen)

3. Tabelle wird nicht korrekt gerendert

Problem: Tabellenspalten sind falsch ausgerichtet

Lösung: Stellen Sie sicher, dass die Pipes richtig ausgerichtet sind:

<!-- ✅ Korrekt -->
| Column 1 | Column 2 |
|----------|----------|
| Data 1   | Data 2   |

<!-- ❌ Falsch -->
|Column 1|Column 2|
|--|--|
|Data 1|Data 2|

Nächste Schritte

• Grundlegende Markdown-Syntax lernen
• Syntax-Spickzettel anzeigen
• Mit GitHub Gist üben
• Offizielle GitHub GFM-Dokumentation lesen

---

GitHub Flavored Markdown ist ein leistungsstarkes Werkzeug für Kommunikation und Zusammenarbeit in der Softwareentwicklung. Durch die Beherrschung dieser Funktionen können Sie effektivere Dokumentation erstellen, Issues besser verfolgen und effizienter mit Ihrem Team zusammenarbeiten.