Bausteine

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.

Links#

Aus Plazello und Outline bekannte Links der Form [Text](page:kuerzel) funktionieren ebenfalls, auch mit #abschnitt. Dieselben Schreibweisen gelten für das href von 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#

:::info[Optionaler Titel]
Text mit **Markdown**.
:::

Es gibt vier Arten: info, tip, warning und danger.

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#

::::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.

Code#

```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:

::::code-group
```bash title="npm"
npm i paket
```
```bash title="pnpm"
pnpm add paket
```
::::

Diagramme und Formeln#

```mermaid
flowchart LR
  Entwurf --> Prüfung --> Live
```

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:

:::steps
### Installieren
Text zum ersten Schritt.
### Einrichten
Text zum zweiten Schritt.
:::

1. Installieren#

   Text zum ersten Schritt.

2. Einrichten#

   Text zum zweiten Schritt.

Karten#

::::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 (page:kuerzel, page:kuerzel#abschnitt, doc:kuerzel), ein Pfad wie /bereich/seite oder eine vollständige URL.

Aufklappbar#

:::details[Frage oder Zusammenfassung]
Versteckter Inhalt, der erst nach einem Klick erscheint.
:::

Spalten#

::::columns
:::column
Links
:::
:::column
Rechts
:::
::::

Medien#

YouTube-Videos werden erst beim Klick geladen – bis dahin lädt der Leser nur ein Vorschaubild.

Im Text#

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.