Rich Examples
Copy rich Markdown examples for blog posts, docs pages, landing sections, and comparison content.
Rich Examples
These examples are intended to be copied into a Markdown field, Markdown block, or Git-backed docs file.
Blog Post
1# Building With Portable Markdown2 3:::toc[Contents]{depth="3" theme="compact"}4:::5 6## Why Markdown7 8Markdown keeps posts portable while the renderer handles presentation.9 10:::callout[Keep content portable]{variant="tip"}11Use directives for structure, not arbitrary HTML.12:::13 14## Code15 16```ts17payloadMarkdown({18 collections: {19 posts: true,20 },21})22```23 24:::details[Advanced notes]{theme="glass"}25Collection-level `code`, `themes`, and `config` can override plugin defaults.26:::Documentation Page
1# Payload Markdown Setup2 3:::toc[On this page]{depth="3"}4:::5 6:::steps{7 variant="cards"8 layout="stack"9 numbered10 stepTheme="cyan"11}12 13### Install14 15```bash16pnpm add @valkyrianlabs/payload-markdown17```18 19### Register The Plugin20 21Add `payloadMarkdown()` to your Payload config.22 23### Render Content24 25Use `MarkdownRenderer` from the server export.26 27:::28 29:::callout[Remember collectionSlug]{variant="warning"}30Pass `collectionSlug` when collection-scoped config should apply.31:::Package Manager Tabs
1:::tabs{2 default="pnpm"3 theme="glass"4 tabTheme="muted"5}6 7:::tab[pnpm]{value="pnpm"}8```bash9pnpm add @valkyrianlabs/payload-markdown10```11:::12 13:::tab[npm]{value="npm"}14```bash15npm install @valkyrianlabs/payload-markdown16```17:::18 19:::tab[yarn]{value="yarn"}20```bash21yarn add @valkyrianlabs/payload-markdown22```23:::24 25:::Landing Section
1:::section{theme="panel"}2 3## Build Docs Without Losing Markdown4 5:::cards{6 columns="3"7 theme="spacious"8 cardTheme="glass"9}10 11:::card[Markdown Field]{12 eyebrow="Core"13 href="/getting-started/fields-and-blocks"14}15Portable Markdown content with live preview.16:::17 18:::card[Directive Autocomplete]{19 eyebrow="Authoring"20 theme="cyan"21}22Snippets, placeholders, and lightweight diagnostics.23:::24 25:::card[Server Rendered]{eyebrow="Rendering"}26Shiki code blocks, heading anchors, TOCs, and themed directives.27:::28 29:::30 31:::Comparison Layout
1:::2col{cellTheme="panel"}2 3### Field Content4 5Use direct Markdown fields for articles, posts, docs, release notes, and single long-form bodies.6 7```tsx8<MarkdownRenderer collectionSlug="posts" markdown={post.body} />9```10 11### Block Content12 13Use `vlMdBlock` inside layout builders when Markdown is one section among other blocks.14 15```tsx16<MarkdownBlockComponent {...block} collectionSlug="pages" />17```18 19:::Warning And Recovery Pattern
1:::callout[Production migration]{variant="danger"}2Back up production data before reconciling Payload schema fields.3:::4 5:::details[Recovery checklist]61. Restore from backup if a schema reconciliation removed expected fields.72. Re-run locally with the same collection config.83. Migrate deprecated `config.options` values into `code`.9:::