Examples

These examples are intended to be copied into a Markdown field or Markdown block.

Blog Post

1# Building with Portable Markdown2 3:::toc {title="Contents" depth="3" theme="compact"}4:::5 6## Why Markdown7 8Markdown keeps posts portable while the renderer handles presentation.9 10:::callout {variant="tip" title="Keep content portable"}11Use directives for structure, not arbitrary HTML.12:::13 14## Code15 16```ts17payloadMarkdown({18  collections: {19    posts: true,20  },21})22```23 24:::details {title="Advanced notes" theme="glass"}25Collection-level `code`, `themes`, and `config` can override plugin defaults.26:::

Docs Page

1# Payload Markdown Setup2 3:::toc {title="On this page" depth="3"}4:::5 6:::steps {variant="cards" layout="stack" numbered stepTheme="cyan"}7 8### Install9 10```bash11pnpm add @valkyrianlabs/payload-markdown12```13 14### Register the plugin15 16Add `payloadMarkdown()` to your Payload config.17 18### Render content19 20Use `MarkdownRenderer` from the server export.21 22:::23 24:::callout {variant="warning" title="Remember collectionSlug"}25Pass `collectionSlug` when collection-scoped config should apply.26:::27 28:::tabs {default="pnpm" theme="glass"}29 30:::tab {label="pnpm" value="pnpm"}31```bash32pnpm add @valkyrianlabs/payload-markdown33```34:::35 36:::tab {label="npm" value="npm"}37```bash38npm install @valkyrianlabs/payload-markdown39```40:::41 42:::

Landing Page

1:::section {theme="panel"}2 3## Build docs without losing Markdown4 5:::cards {columns="3" theme="spacious" cardTheme="glass"}6 7:::card {eyebrow="Core" title="Markdown Field" href="/docs/markdown-field"}8Portable Markdown content with live preview.9:::10 11:::card {eyebrow="Authoring" title="Directive Autocomplete" theme="cyan"}12Snippets, placeholders, and lightweight diagnostics.13:::14 15:::card {eyebrow="Rendering" title="Server Rendered"}16Shiki code blocks, heading anchors, TOCs, and themed directives.17:::18 19:::20 21:::