Komponenten in Markdown verwenden
Ergänze Schritte, Callouts, Tabs, Karten, Dateibäume und weitere eingebaute Strukturen mit MDC-Syntax.
Ginko Docs rendert gewöhnliches Markdown mit seinen Prose-Komponenten und stellt 33 Autoren-Tags für stärker strukturierte Inhalte bereit. Verwende einen Tag, wenn er eine Abfolge, Auswahl, Warnung oder Beziehung leichter erfassbar macht.
Strukturierte Komponente einfügen
Schreibe Komponenten-Tags in MDC-Syntax. Attribute in geschweiften Klammern werden zu Props; der Text im Block füllt den Standard-Slot.
::steps{mode="numbered"}
### Pakete installieren
Füge Ginko Docs und Ginko Content zum Nuxt-Projekt hinzu.
### Layer erweitern
Füge `@lupinum/ginko-docs` zu `nuxt.config.ts` hinzu.
::Verwende Komponenten nur, wenn ihre Struktur Lesern beim Erfassen oder Handeln hilft. Für gewöhnliche Texte bleiben Absätze und Listen klarer.
Fence-Tiefe an die Verschachtelung anpassen
MDC markiert Verschachtelung mit der Anzahl der Doppelpunkte. Ein direktes Kind verwendet einen Doppelpunkt mehr als sein Elternblock und schließt mit derselben Anzahl. Steps sind die Ausnahme: Überschriften der Ebene drei teilen ihre Prosa in semantische Schritte.
::tabs{layout="line"}
:::tab{label="pnpm"}
Mit pnpm installieren.
:::
:::tab{label="npm"}
Mit npm installieren.
:::
::Ein unpassender Abschluss erscheint als sichtbare Zeichensetzung. Verschiebe Öffnung und Abschluss deshalb gemeinsam, wenn du verschachtelte Blöcke umstellst.
Passenden Tag wählen
| Aufgabe | Ausgangspunkt |
|---|---|
| Geordnete Anleitung | steps mit Überschriften der Ebene drei |
| Warnung oder Einschub | GFM-Hinweise, note, warning oder info |
| Umschaltbare Alternativen | tabs und tab |
| Verlinkte Auswahl | cards und card |
| Verzeichnisstruktur | files mit verschachtelter Markdown-Liste |
| Bild mit Caption oder festen Abmessungen | figure |
| Benachbarte API-Felder | api mit strukturiertem YAML |
| Datierte Änderungen | timeline und timeline-item |
Die MDC-Komponentenreferenz listet jeden Tag, erlaubte Props, Slots, Aliase und endliche Werte. Schreibe nur statische Prop-Werte; die Content-Policy lehnt dynamische Vue-Bindings ab.
Gewöhnliche Inhalte als Markdown schreiben
Eine Komponente sollte eine echte Inhaltsbeziehung ausdrücken und nicht nur einen Absatz dekorieren. Verwende Überschriften, Listen, Tabellen, Blockquotes und Code-Fences, wenn Standard-Markdown die Bedeutung bereits trägt.
Wenn die eingebauten Tags ein wiederkehrendes Produktkonzept nicht ausdrücken können, registriere Vue-Komponente, Autoren-Tag, Render-Policy und optionalen Agent-Serializer gemeinsam nach dem Leitfaden für eigene Komponenten.