Markdown In Markdown

When documenting Markdown syntax, the examples often contain both directive markers and fenced code blocks. Use a fence with more backticks than any fence inside the example.

Showing A Directive

Use four backticks around an example that contains a normal triple-backtick code fence:

1````md2:::callout[Use the server renderer]{variant="tip"}3Render fields with:4 5```tsx6<MarkdownRenderer markdown={post.content} />7```8:::9````

The rendered documentation shows the directive syntax instead of executing it.

Showing Nested Directives

Use the same approach for a directive inside another directive:

1````md2:::steps{3  variant="cards"4  stepTheme="glass"5}6 7### Configure8 9:::callout[Collection scope]{variant="warning"}10Pass `collectionSlug` when collection-scoped config should apply.11:::12 13### Render14 15```tsx16<MarkdownRenderer collectionSlug="posts" markdown={content} />17```18 19:::20````

Showing Tabs

Tabs examples usually contain directive nesting and package-manager code fences:

1````md2:::tabs{default="pnpm"}3 4:::tab[pnpm]{value="pnpm"}5```bash6pnpm add @valkyrianlabs/payload-markdown7```8:::9 10:::tab[npm]{value="npm"}11```bash12npm install @valkyrianlabs/payload-markdown13```14:::15 16:::17````

Common Mistakes