markdownTest

Markdown – vollständiges Beispiel

Dieses Dokument demonstriert die wichtigsten Markdown-Elemente sowie einige verbreitete Erweiterungen wie Callouts, Tabs, Fußnoten und Details-Bereiche.

1. Überschriften

Überschrift Ebene 1

Überschrift Ebene 2

Überschrift Ebene 3

Überschrift Ebene 4

Überschrift Ebene 5

Überschrift Ebene 6

2. Textformatierung

Normaler Fließtext.

Fetter Text

Ebenfalls fetter Text

Kursiver Text

Ebenfalls kursiver Text

Fett und kursiv

Ebenfalls fett und kursiv

Durchgestrichener Text

Markierter Text mit HTML

Unterstrichener Text mit HTML

H~2~O
(Subscript – wird nicht von jedem Markdown-Renderer unterstützt.)

X^2^
(Superscript – ebenfalls rendererabhängig.)

3. Absätze und Zeilenumbrüche

Dies ist der erste Absatz.

Dies ist ein neuer Absatz, da zwischen den Textblöcken eine Leerzeile steht.

Diese Zeile endet mit zwei Leerzeichen.
Dadurch wird ein expliziter Zeilenumbruch erzeugt.

4. Inline-Code

Mit npm install kann ein Befehl als Inline-Code dargestellt werden.

Auch Dateinamen wie config.yaml oder Variablen wie userName können so hervorgehoben werden.

5. Codeblöcke

Ohne Syntax-Highlighting

Dies ist ein einfacher Codeblock.
Keine Sprache wurde angegeben.

JavaScript

function greet(name) {
  console.log(`Hallo ${name}!`);
}

greet("Welt");

TypeScript

interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: "Max"
};

Python

def greet(name: str) -> str:
    return f"Hallo {name}!"

print(greet("Welt"))

JSON

{
  "name": "Max Mustermann",
  "active": true,
  "roles": [
    "admin",
    "editor"
  ]
}

YAML

application:
  name: example
  version: 1.0.0

server:
  port: 8080
  enabled: true

Bash

npm install
npm run build
npm run start

SQL

SELECT
    id,
    name,
    email
FROM users
WHERE active = true
ORDER BY name ASC;

6. Ungeordnete Listen

• Erster Eintrag
• Zweiter Eintrag
• Dritter Eintrag
  • Unterpunkt 1
  • Unterpunkt 2
    • Unter-Unterpunkt
• Vierter Eintrag

Alternativ:

• Eintrag mit Sternchen
• Noch ein Eintrag

Oder:

• Eintrag mit Plus
• Noch ein Eintrag

7. Nummerierte Listen

1. Erster Schritt
2. Zweiter Schritt
3. Dritter Schritt
   1. Unterpunkt
   2. Unterpunkt
4. Vierter Schritt

Die tatsächlichen Zahlen können bei vielen Renderern auch identisch sein:

1. Punkt eins
2. Punkt zwei
3. Punkt drei

8. Gemischte Listen

1. Projekt vorbereiten
   • Repository erstellen
   • README anlegen
   • Lizenz hinzufügen
2. Entwicklung
   • Backend
     • API
     • Datenbank
   • Frontend
     • Komponenten
     • Styling
3. Deployment

9. Aufgabenlisten / Checkboxes

• Markdown-Datei erstellen
• Überschriften hinzufügen
• Dokumentation vervollständigen
• Veröffentlichung vorbereiten

Verschachtelt:

• Projekt
  • Planung
  • Entwicklung
  • Tests
  • Deployment

10. Links

Normaler Link

OpenAI

Link mit Titel

OpenAI

Automatischer Link

https://openai.com

E-Mail-Adresse

beispiel@example.com

Referenz-Link

Weitere Informationen findest du auf der Projektseite.

11. Interne Links / Anker

Springe zu:

Codeblöcke

Tabellen

Callouts

12. Bilder

![Alternativtext](https://example.com/image.png)

Beispiel:

Bild mit Titel:

![Alternativtext](https://example.com/image.png "Bildtitel")

Bild als Link:

[![Alternativtext](https://example.com/image.png)](https://example.com)

13. Zitate

Dies ist ein einfaches Zitat.

Mehrzeilig:

Dies ist ein längeres Zitat.

Es kann aus mehreren Absätzen bestehen.

Verschachtelte Zitate:

Ebene 1

Ebene 2

Ebene 3

Zitat mit Formatierung:

Wichtige Aussage

Hier kann auch Inline-Code verwendet werden.

14. Tabellen

Textausrichtung

Formatierung innerhalb einer Tabelle

15. Horizontale Linien

Mit drei Bindestrichen:

Mit drei Sternchen:

Mit drei Unterstrichen:

16. Escape-Zeichen

Markdown-Sonderzeichen können mit einem Backslash maskiert werden.

*Dieser Text ist nicht kursiv.*

# Dies ist keine Überschrift.

[Dies ist kein Link]

`Dies ist kein Inline-Code`

17. HTML innerhalb von Markdown

Viele Markdown-Renderer erlauben HTML.

18. Klappbereiche / Details

HTML-Variante:

console.log("Auch Code ist möglich.");

19. Fußnoten

Dies ist ein Text mit einer Fußnote.¹

Eine weitere Aussage benötigt ebenfalls eine Quelle.²

Sogar ein zweiter Absatz ist je nach Renderer möglich.

20. Callouts / Admonitions

Callouts sind keine einheitliche Markdown-Funktion. Je nach Plattform wird eine andere Syntax verwendet.

GitHub Alerts

Obsidian Callouts

Obsidian verwendet ebenfalls die [!TYPE]-Syntax:

[!INFO] Dies ist eine Information.

[!SUCCESS] Die Aktion wurde erfolgreich abgeschlossen.

[!QUESTION] Hier befindet sich eine Frage.

[!FAILURE] Die Aktion ist fehlgeschlagen.

[!BUG] Hier wurde ein möglicher Fehler entdeckt.

[!EXAMPLE] Dies ist ein Beispiel.

[!QUOTE] Dies ist ein Zitat.

Einklappbarer Obsidian-Callout

Standardmäßig eingeklappt:

Standardmäßig ausgeklappt:

21. MkDocs Material Admonitions

MkDocs Material verwendet beispielsweise:

!!! note "Hinweis"
    Dies ist ein Hinweis.

!!! tip "Tipp"
    Dies ist ein hilfreicher Tipp.

!!! warning "Warnung"
    Dies ist eine Warnung.

!!! danger "Gefahr"
    Dies ist eine besonders wichtige Warnung.

Einklappbare Variante:

??? info "Weitere Informationen"
    Dieser Inhalt kann ein- und ausgeklappt werden.

Standardmäßig geöffnet:

???+ info "Weitere Informationen"
    Dieser Bereich ist standardmäßig geöffnet.

22. Tabs

Tabs gehören ebenfalls nicht zum Markdown-Kern.

Die Syntax hängt vom verwendeten System ab.

MkDocs Material Tabs

=== "JavaScript"

    ```javascript
    console.log("Hallo Welt");
    ```

=== "Python"

    ```python
    print("Hallo Welt")
    ```

=== "Bash"

    ```bash
    echo "Hallo Welt"
    ```

Beispiel mit normalem Inhalt:

=== "Windows"

    Installation unter Windows:

    1. Installer herunterladen
    2. Setup starten
    3. Installation abschließen

=== "macOS"

    Installation über Homebrew:

    `brew install example`

=== "Linux"

    Installation:

    `sudo apt install example`

23. Docusaurus Tabs

Docusaurus verwendet React-Komponenten bzw. MDX:

mdx
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="js" label="JavaScript" default>

```javascript
console.log("Hallo Welt");

print("Hallo Welt")

24. Definition Lists

Wird beispielsweise von einigen Markdown-Erweiterungen unterstützt:

Markdown
: Eine leichtgewichtige Auszeichnungssprache.

HTML
: HyperText Markup Language.

CSS
: Cascading Style Sheets.

25. Abkürzungen

Von einigen Markdown-Systemen unterstützt:

HTML ist eine Auszeichnungssprache.

*[HTML]: HyperText Markup Language

26. Tastatur-Tasten

Mit HTML:

Drücke Ctrl + C zum Kopieren.

Drücke Ctrl + Shift + P, um die Command Palette zu öffnen.

27. Mathematische Formeln

Je nach Renderer wird LaTeX bzw. MathJax unterstützt.

Inline

Die Formel lautet $E = mc^2$.

Die Formel lautet:

\(E = mc^2\)

Block

$$
E = mc^2
$$

Komplexeres Beispiel:

$$
f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}
       e^{-\frac{(x-\mu)^2}{2\sigma^2}}
$$

28. Mermaid-Diagramme

Unter anderem GitHub und viele Dokumentationssysteme unterstützen Mermaid.

Flowchart

flowchart LR
    A[Start] --> B{Entscheidung}
    B -->|Ja| C[Aktion A]
    B -->|Nein| D[Aktion B]
    C --> E[Ende]
    D --> E

Sequenzdiagramm

sequenceDiagram
    participant Client
    participant API
    participant Database

    Client->>API: GET /users
    API->>Database: SELECT users
    Database-->>API: Ergebnisse
    API-->>Client: JSON Response

Klassendiagramm

classDiagram
    class User {
        +String name
        +String email
        +login()
    }

    class Admin {
        +deleteUser()
    }

    User <|-- Admin

29. Emoji

Direkte Unicode-Emojis:

✅ Erfolg
❌ Fehler
⚠️ Warnung
💡 Idee
🚀 Deployment
📦 Paket
🔧 Konfiguration
📝 Dokumentation

GitHub und einige andere Systeme unterstützen zusätzlich Emoji-Codes:

:rocket:
:white_check_mark:
:warning:
:bulb:

30. Erwähnungen

Auf Plattformen wie GitHub:

@username

Beispiel:

@maxmustermann

31. Issues und Pull Requests

GitHub erkennt beispielsweise:

#123

oder Repository-übergreifend:

organisation/repository#123

32. Relative Links

[Dokumentation](./docs/index.md)

[Konfiguration](../config/settings.md)

[README](./README.md)

33. Verlinkte Überschriften

## Installation

Siehe [Installation](#installation).

34. Kommentare

Markdown selbst kennt keine Kommentare. Häufig werden HTML-Kommentare verwendet:

<!-- Dieser Kommentar wird nicht angezeigt. -->

35. Front Matter

Viele Static-Site-Generatoren verwenden YAML Front Matter:

---
title: Markdown Beispiel
description: Vollständige Markdown-Demonstration
author: Max Mustermann
date: 2026-09-06
tags:
  - markdown
  - dokumentation
  - beispiel
draft: false
---

36. Verschachtelter Beispielbereich

37. Komplexe Tabelle

* Bestandteil vieler verbreiteter Markdown-Dialekte wie GitHub Flavored Markdown, aber nicht zwingend des ursprünglichen Markdown-Kerns.

38. Vollständiges Mini-Beispiel

Projekt Alpha

Installation

npm install projekt-alpha

Verwendung

import { Client } from "projekt-alpha";

const client = new Client({
  apiKey: process.env.API_KEY
});

const result = await client.run();

console.log(result);

Unterstützte Plattformen

Aufgaben

• Grundfunktion implementieren
• API dokumentieren
• Integrationstests
• Version 2.0 veröffentlichen

Hinweise

client:
  timeout: 5000
  retries: 3
  debug: false

Weitere Informationen findest du in der Dokumentation.

Ende

Damit enthält dieses Beispiel unter anderem:

• Überschriften
• Fett, kursiv und durchgestrichen
• Absätze
• Zeilenumbrüche
• Inline-Code
• Codeblöcke
• Syntax-Highlighting
• Listen
• verschachtelte Listen
• Task Lists
• Links
• Referenz-Links
• Bilder
• Zitate
• Tabellen
• horizontale Linien
• Escape-Zeichen
• HTML
• Details / Collapse
• Fußnoten
• Callouts
• Admonitions
• Tabs
• Definition Lists
• Abkürzungen
• Tastatur-Tasten
• mathematische Formeln
• Mermaid-Diagramme
• Emojis
• Mentions
• interne Links
• Kommentare
• YAML Front Matter

Hinweis: Nicht alle Funktionen werden von jedem Markdown-Renderer unterstützt. Insbesondere Tabs, Callouts, Mermaid, LaTeX, Fußnoten und Admonitions sind abhängig von der eingesetzten Plattform.