Code Blocks
Display inline code, filenames, grouped snippets, and file trees in Docd.
Basic
Inline code
Use inline code for short references inside text.
content.config.ts
Code blocks
Use fenced code blocks for multi-line examples with syntax highlighting.
export default defineNuxtConfig({
extends: ["@baybreezy/docd"],
})
Filenames
Add a filename in square brackets to give the snippet more context.
nuxt.config.ts
export default defineNuxtConfig({
extends: ["@baybreezy/docd"],
})
Every Docd code block includes a copy button automatically.
Advanced
prose-code-group
Use prose-code-group to show equivalent snippets in tabs.
prose-code-tree
Use prose-code-tree when you want to show a small project structure or multiple related files.
Select a file to view its content
prose-show-case
Use prose-show-case when you want to render the output and the source side by side.
content/index.md
prose-code-collapse
Use prose-code-collapse for long snippets that should stay out of the way until expanded.
app/assets/css/theme.css
@theme {
--color-background: oklch(0.98 0.01 95);
--color-foreground: oklch(0.18 0.01 95);
--radius-xl: 1rem;
--font-sans: "Satoshi", sans-serif;
}