Use components in Markdown
Add steps, callouts, tabs, cards, file trees, and other built-in structures with MDC syntax.
Ginko Docs renders ordinary Markdown with its prose components and exposes 33 authored tags for content that needs more structure. Use a tag when it makes a sequence, choice, warning, or relationship easier to scan.
Add a structured component
Write component tags with MDC syntax. Attributes inside braces become props; the text inside the block fills its default slot.
::steps{mode="numbered"}
### Install the packages
Add Ginko Docs and Ginko Content to the Nuxt project.
### Extend the layer
Add `@lupinum/ginko-docs` to `nuxt.config.ts`.
::Use components only when their structure helps the reader scan or act. Normal paragraphs and lists remain clearer for ordinary prose.
Match fence depth to nesting
MDC uses the number of colons to mark nesting. A direct child uses one more colon than its parent and closes with the same count. Steps are the exception: level-three headings divide their prose into semantic steps.
::tabs{layout="line"}
:::tab{label="pnpm"}
Install with pnpm.
:::
:::tab{label="npm"}
Install with npm.
:::
::An unmatched closer is rendered as visible punctuation. Keep the opening and closing counts together when moving nested blocks.
Choose the tag for the job
| Need | Start with |
|---|---|
| Ordered instructions | steps with level-three headings |
| A warning or aside | GFM alerts, note, warning, or info |
| Switchable alternatives | tabs and tab |
| Linked choices | cards and card |
| A directory shape | files with a nested Markdown list |
| An image with a caption or fixed dimensions | figure |
| Adjacent API fields | api with structured YAML |
| Dated changes | timeline and timeline-item |
The MDC component reference lists every tag, accepted prop, slot, alias, and finite value. Author only static prop values; dynamic Vue bindings are rejected by the content policy.
Keep ordinary content ordinary
A component should express a real content relationship, not decorate a paragraph. Prefer headings, lists, tables, blockquotes, and code fences when standard Markdown already carries the meaning.
When the built-ins cannot represent a repeated product concept, follow the custom component guide to register the Vue component, authored tag, render policy, and optional agent serializer as one contract.