Visual Components Demo

Diese Demo zeigt alle verfügbaren Visualisierungs-Komponenten für bessere didaktische Darstellung.

Callout Komponenten

Callouts eignen sich perfekt für wichtige Hinweise und Warnungen.

Timeline Component

Timelines zeigen chronologische Abläufe oder Prozess-Steps visuell.

Comparison Table

Zeigt Gegenüberstellungen von richtig vs. falsch, oder gut vs. schlecht.

Step-by-Step Tutorial

Perfekt für Tutorials und Schritt-für-Schritt-Anleitungen.

git checkout main
git pull origin main
git checkout -b feature/new-auth

git add .
git commit -m "feat: add JWT authentication"

git push -u origin feature/new-auth

Professional Charts (Recharts)

Professionelle, interaktive Charts mit Recharts Library.

Bar Chart

Line Chart

Pie/Donut Chart

Flow Diagrams (React Flow)

Interaktive Knoten-Graphen für Systemarchitekturen, Workflows, etc.

Code Playground

Interaktiver Code-Editor mit Live-Output.

Click "Run" to see output...

Kombinierte Beispiele

Du kannst Components auch kombinieren für komplexere Erklärungen:

const MemoizedComponent = React.memo(MyComponent);

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

Math Support

Natürlich funktioniert auch weiterhin LaTeX Math:

Die Euler-Identität: $e^{i\pi} + 1 = 0$

Oder als Block:

Code Highlighting

Und natürlich alle Sprachen mit Syntax Highlighting:

def fibonacci(n: int) -> int:
    """Berechnet die n-te Fibonacci-Zahl rekursiv."""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Optimiert mit Memoization
from functools import lru_cache

@lru_cache(maxsize=None)
def fibonacci_fast(n: int) -> int:
    if n <= 1:
        return n
    return fibonacci_fast(n-1) + fibonacci_fast(n-2)

# Docker Multi-Stage Build
docker build -t myapp:latest .
docker run -p 3000:3000 myapp:latest

Alle diese Components folgen der bilabs CI und sind responsive designed. Sie lassen sich frei in jedem MDX Note kombinieren.