Beispiele

Codeblöcke werden auf Desktop in einer fixierten rechten Seitenleiste angeheftet, damit Leser sie beim Scrollen referenzieren können. Auf Mobilgeräten werden sie inline dargestellt.

RequestExample

Verwenden Sie RequestExample, um Code für API-Anfragen anzuzeigen. Mehrere Codeblöcke erzeugen Tab-Ansichten.

curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name": "John Doe", "email": "john@example.com"}'

Verwendung:

<RequestExample>
```bash cURL
curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name": "John Doe", "email": "john@example.com"}'
```
</RequestExample>

ResponseExample

Verwenden Sie ResponseExample, um API-Antworten anzuzeigen. Fügen Sie nach dem Sprachbezeichner einen Statuscode und eine Beschreibung ein.

{
  "id": "usr_123",
  "name": "John Doe",
  "email": "john@example.com",
  "created_at": "2024-01-15T10:30:00Z"
}

Verwendung:

<ResponseExample>
```json 200: Success
{
  "id": "usr_123",
  "name": "John Doe",
  "email": "john@example.com",
  "created_at": "2024-01-15T10:30:00Z"
}
```
</ResponseExample>

Der Statuscode bestimmt die Farbe der Anzeige:

• Grün – 2xx-Erfolgscodes
• Blau – 3xx-Weiterleitungscodes
• Bernsteinfarben – 4xx-Clientfehler
• Rot – 5xx-Serverfehler

Mehrere Programmiersprachen

Fügen Sie mehrere Codeblöcke hinzu, um eine Tab-Oberfläche zu erstellen:

curl -X GET https://api.example.com/users/123 \
  -H "Authorization: Bearer $TOKEN"

Verwendung:

<RequestExample>
```bash cURL
curl -X GET https://api.example.com/users/123 \
  -H "Authorization: Bearer $TOKEN"
```

```python Python
import requests

response = requests.get(
    "https://api.example.com/users/123",
    headers={"Authorization": f"Bearer {TOKEN}"}
)
user = response.json()
```

```javascript JavaScript
const response = await fetch("https://api.example.com/users/123", {
  headers: {
    "Authorization": `Bearer ${TOKEN}`
  }
});
const user = await response.json();
```

```go Go
package main

import (
  "fmt"
  "io"
  "net/http"
)

func main() {
  req, _ := http.NewRequest("GET", "https://api.example.com/users/123", nil)
  req.Header.Set("Authorization", "Bearer TOKEN")

  resp, _ := (&http.Client{}).Do(req)
  defer resp.Body.Close()

  body, _ := io.ReadAll(resp.Body)
  fmt.Println(string(body))
}
```

```ruby Ruby
require 'net/http'
require 'uri'
require 'json'

uri = URI("https://api.example.com/users/123")
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true

request = Net::HTTP::Get.new(uri)
request["Authorization"] = "Bearer TOKEN"

response = http.request(request)
puts JSON.parse(response.body)
```
</RequestExample>

Mehrere Antwortcodes

Zeigen Sie verschiedene Antwortszenarien in separaten Tabs an:

{
  "id": "usr_123",
  "name": "John Doe",
  "email": "john@example.com"
}

Verwendung:

<ResponseExample>
```json 200: Success
{
  "id": "usr_123",
  "name": "John Doe",
  "email": "john@example.com"
}
```

```json 400: Bad Request
{
  "error": "validation_error",
  "message": "Email is required"
}
```

```json 404: Not Found
{
  "error": "not_found",
  "message": "User not found"
}
```
</ResponseExample>

Kombinierte Verwendung

Verwenden Sie für API-Dokumentation beide Komponenten zusammen. Die Anfrage wird in der Seitenleiste über der Antwort angezeigt:

curl -X POST https://api.example.com/orders \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "product_id": "prod_456",
    "quantity": 2
  }'

{
  "id": "ord_789",
  "product_id": "prod_456",
  "quantity": 2,
  "status": "pending",
  "created_at": "2024-01-15T10:30:00Z"
}

Verwendung:

<RequestExample>
```bash cURL
curl -X POST https://api.example.com/orders \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "product_id": "prod_456",
    "quantity": 2
  }'
```
</RequestExample>

<ResponseExample>
```json 201: Created
{
  "id": "ord_789",
  "product_id": "prod_456",
  "quantity": 2,
  "status": "pending",
  "created_at": "2024-01-15T10:30:00Z"
}
```
</ResponseExample>

Formate für Statuscodes

ResponseExample unterstützt zwei Formate für Statuscodes:

```json 200: Success      // Colon separator

```json 400 - Bad Request // Dash separator

Beide Formate werden identisch verarbeitet und zeigen den Statuscode mit seiner Beschreibung im Tab an.

Wie geht es weiter?