# Bausteine > Alle Markdown-Erweiterungen von Docsello mit Beispielen – Hinweise, Tabs, Schritte, Karten, Code, Diagramme und mehr. Docsello versteht CommonMark und GitHub Flavored Markdown (Tabellen, Checklisten, Durchgestrichenes, automatische Links) und ergänzt es um **Bausteine** in Direktiven-Schreibweise mit Doppelpunkten. Im Editor fügst du alle Bausteine über das Slash-Menü ein (`/`); in der Markdown-Ansicht oder in Dateien schreibst du sie so wie unten. :::info Rohes HTML wird nicht dargestellt. Wiederhole den Seitentitel nicht als `# Titel` im Text – der Titel ist ein eigenes Feld. Überschriften im Text beginnen deshalb mit `##`. ::: ## Links | Ziel | Schreibweise | |---|---| | Andere Seite (über ihr Kürzel, auch in anderen Bereichen) | `[Text](page:kuerzel)` | | Seite in einem bestimmten Bereich | `[Text](page:bereich/pfad/zur/seite)` | | Ganzer Bereich | `[Text](page:bereich)` | | Relative Datei (beim Hochladen von Ordnern) | `[Text](./andere-seite.md)` | | Abschnitt einer Seite | `[Text](page:kuerzel#abschnitt)` | | Externe Seite | `[Text](https://example.com)` – öffnet in einem neuen Tab | Aus Plazello und Outline bekannte Links der Form `[Text](doc:kuerzel)` funktionieren ebenfalls, auch mit `#abschnitt`. Dieselben Schreibweisen gelten für das `href` von [Karten](#karten) und Buttons. Links auf Seiten, die es nicht gibt, meldet die Vorschau als *Defekte Links*; die Übersicht der Verwaltung zählt sie nach jedem Veröffentlichen. Eine Überschrift bekommt eine feste Anker-ID mit `## Überschrift {#meine-id}`. ## Hinweise ```markdown :::info[Optionaler Titel] Text mit **Markdown**. ::: ``` Es gibt vier Arten: `info`, `tip`, `warning` und `danger`. :::tip[Tipp] So sieht ein Tipp aus. ::: :::warning Und so eine Warnung ohne Titel. ::: Beim Import werden auch die Schreibweisen anderer Werkzeuge erkannt: `:::note`, `:::important` (werden zu Info), `:::caution` (Warnung), `:::success` (Tipp), `:::error` (Gefahr), Titel ohne Klammern (`:::note Mein Titel`) und GitBook-Hinweise (`{% hint style="info" %}`). ## Tabs ````markdown ::::tabs{sync="paketmanager"} :::tab{title="npm"} ```bash npm install ``` ::: :::tab{title="pnpm"} ```bash pnpm install ``` ::: :::: ```` Alle Tab-Gruppen mit demselben `sync`-Wert schalten gemeinsam um, und die Auswahl wird gemerkt. Der äußere Block hat einen Doppelpunkt mehr als die inneren. ::::tabs{sync="beispiel"} :::tab{title="Erster Tab"} Inhalt des ersten Tabs. ::: :::tab{title="Zweiter Tab"} Inhalt des zweiten Tabs. ::: :::: ## Code ````markdown ```ts title="config.ts" {2,4-6} showLineNumbers const a = 1; const b = 2; // hervorgehoben ``` ```` - `title="…"` zeigt einen Dateinamen über dem Block. - `{2,4-6}` hebt Zeilen hervor, `showLineNumbers` zeigt Zeilennummern. Eine **Code-Gruppe** macht aus mehreren Codeblöcken Tabs – die Titel werden zu Tab-Namen: ````markdown ::::code-group ```bash title="npm" npm i paket ``` ```bash title="pnpm" pnpm add paket ``` :::: ```` ## Diagramme und Formeln ````markdown ```mermaid flowchart LR Entwurf --> Prüfung --> Live ``` ```` ```mermaid flowchart LR Entwurf --> Prüfung --> Live ``` Formeln schreibst du in LaTeX (KaTeX): `$a^2 + b^2 = c^2$` im Text oder als eigener Block zwischen `$$ … $$`. ## Schritte Jede Überschrift innerhalb des Blocks beginnt einen nummerierten Schritt: ```markdown :::steps ### Installieren Text zum ersten Schritt. ### Einrichten Text zum zweiten Schritt. ::: ``` :::steps ### Installieren Text zum ersten Schritt. ### Einrichten Text zum zweiten Schritt. ::: ## Karten ```markdown ::::cards{cols=2} :::card{title="Schnellstart" icon="rocket" href="page:schnellstart"} Eine Karte, die auf eine andere Seite verlinkt. ::: :::card{title="Hilfe" icon="life-buoy" href="https://example.com/support"} Eine Karte mit externem Link. ::: :::: ``` - `cols` legt die Spaltenzahl fest (1–6). - `icon` ist ein Symbolname aus der Symbolauswahl von Docsello, z. B. `rocket`, `book-open`, `code`, `lock`, `globe`, `server`, `users`, `key`, `lightbulb`, `life-buoy`. - `href` macht die ganze Karte zum Link: eine Seite wie bei normalen [Links](#links) (`page:kuerzel`, `page:kuerzel#abschnitt`, `doc:kuerzel`), ein Pfad wie `/bereich/seite` oder eine vollständige URL. ::::cards{cols=2} :::card{title="Schnellstart" icon="rocket" href="page:schnellstart"} In wenigen Minuten zur ersten Seite. ::: :::card{title="Editor" icon="layers" href="page:editor#slash-menü"} Bausteine im Editor einfügen. ::: :::: ## Aufklappbar ```markdown :::details[Frage oder Zusammenfassung] Versteckter Inhalt, der erst nach einem Klick erscheint. ::: ``` :::details[Wie sieht das aus?] So – ideal für FAQ und Details, die nicht jeder lesen muss. ::: ## Spalten ```markdown ::::columns :::column Links ::: :::column Rechts ::: :::: ``` ## Medien | Baustein | Schreibweise | |---|---| | Bild | `![Alternativtext](media: "Bildunterschrift")` – siehe [Bilder & Medien](doc:bilder-und-medien) | | Screenshot | `::screenshot{key="bestellungen" alt="Bestellübersicht" caption="…"}` – siehe [Screenshots](doc:screenshots) | | Einbettung | `::embed{url="https://…"}` – YouTube, Loom, Figma oder jede andere https-Adresse | | Datei zum Herunterladen | `::file{src="media:" name="Handbuch.pdf"}` für eine Datei aus der Mediathek, oder `src="https://…/handbuch.pdf"` | | Button | `::button[Jetzt starten]{href="page:schnellstart"}` – Seite, Pfad oder URL wie bei Karten; zweite Farbe mit `variant=secondary` | | Unterseiten-Liste | `::children` – Karten mit allen Unterseiten der aktuellen Seite | YouTube-Videos werden erst beim Klick geladen – bis dahin lädt der Leser nur ein Vorschaubild. ## Im Text | Baustein | Schreibweise | Ergebnis | |---|---|---| | Badge | `:badge[Neu]{variant=success}` | :badge[Neu]{variant=success} | | Tastenkürzel | `:kbd[Strg+K]` | :kbd[Strg+K] | | Symbol | `:icon[rocket]` | :icon[rocket] | Badges gibt es in den Varianten `info`, `success`, `warning` und `danger`. ## Für KI-Agenten Dieselbe Referenz in Kurzform liefert der MCP-Server über das Werkzeug `markdown_syntax`, damit KI-Agenten Inhalte mit allen Bausteinen schreiben können. Siehe [MCP-Server](doc:mcp-server).