Extensions add syntax to Markdown for content that plain Markdown cannot express, such as callouts, tabs, and embedded video. Every extension is built into the sarde binary and active by default.
Block extensions wrap content in a :::name fence. Inline extensions sit inside a sentence, as in ::kbd[Ctrl+S]. Using Extensions covers the shared syntax, attributes, and nesting rules. To add ::: blocks of your own, see Custom Directives. The Kitchen Sink page shows every extension rendered on one page.
Each table below groups extensions by what the reader sees.
Callouts and status
| Extension | Use it to |
|---|---|
| Aside | Set a note, tip, warning, or danger apart from the surrounding text. |
| Badges | Label a status, version, or category with a colored pill. |
| Highlight | Mark a word or phrase with a colored background. |
| Annotation | Attach a tooltip to a term without breaking the sentence. |
| Spoiler | Blur text until the reader reveals it. |
Layout and structure
| Extension | Use it to |
|---|---|
| Cards | Put content in a bordered container with a title and icon. |
| Card Grid | Arrange cards in a responsive grid. |
| Columns | Place content side by side. |
| Tabs | Switch between related panels, with the selection synced across the site. |
| Steps | Number a sequence of instructions. |
| Timeline | List dated entries such as milestones or releases. |
Collapsible content
| Extension | Use it to |
|---|---|
| Details | Hide content behind a clickable summary. |
| Accordion | Group details so that opening one closes the others. |
Links and actions
| Extension | Use it to |
|---|---|
| Link Buttons | Show a link as a button, alone or in a group. |
| Link Card | Show a link as a card with a title, description, and image. |
| Copy Text | Let the reader copy a value with one click. |
Images and media
| Extension | Use it to |
|---|---|
| Figure | Add a caption below an image. |
| Gallery | Show images in a grid with a full-screen lightbox. |
| Image Compare | Compare two images with a draggable slider. |
| Video | Embed YouTube, Vimeo, or self-hosted video. |
| Icon | Place an SVG icon inside a sentence. |
Technical content
| Extension | Use it to |
|---|---|
| File Tree | Draw a directory structure. |
| Terminal | Show commands and their output in a terminal window. |
| Kbd | Show keys and key combinations as keycaps. |
| Math | Typeset LaTeX formulas. |
| Mermaid | Draw diagrams from text definitions. |
Standard Markdown, including tables, task lists, and footnotes, is covered in Markdown Basics. Code block features are covered in the Code Blocks guide.
Using Extensions
How block and inline extension syntax works, including fenced directives and nesting rules
Custom Directives
Author your own ::: block directives with a YAML schema, an HTML template, and an optional CSS sidecar
Accordion
Group collapsible detail sections so opening one closes the others
Aside
Add colored callout blocks for notes, tips, warnings, and dangers that stand out from content
Badges
Display short colored pill labels with optional icons for status, versions, or categories
Card
Display content in a bordered, elevated container with an optional title and icon
Card Grid
Arrange multiple cards in a responsive multi-column grid layout
Details
Create a collapsible section with a clickable summary, optionally expanded by default
Figure
Wrap images or other content in a figure element with an optional caption
File Tree
Render directory structures as a styled tree with folder and file icons
Gallery
Display multiple images in a responsive grid with a built-in full-screen lightbox
Image Compare
Compare a before and after image pair with a draggable slider
Link Buttons
Render styled anchor links that look like buttons, with multiple color variants
Link Card
Render a clickable card-style link with a title, description, and optional icon or image
Math
Render inline and block LaTeX math expressions using KaTeX
Mermaid
Render flowcharts, sequence diagrams, and other visualizations from text definitions
Steps
Display a numbered sequence of instructions with a connecting vertical progress line
Tabs
Switch between related content panels, with tab selection synced across the site
Terminal
Render content inside a macOS-style terminal window with automatic line classification
Timeline
Display a vertical sequence of entries with markers for changelogs or milestones
Video
Embed YouTube, Vimeo, or self-hosted video files with a responsive wrapper
Columns
Split content into side-by-side columns with a configurable column count
Annotation
Attach hoverable, keyboard-accessible tooltips to terms inline without breaking the sentence
Copy Text
Turn a text snippet into a one-click clipboard copy styled like inline code
Highlight
Draw attention to key words or phrases with a colored background highlight
Icon
Render inline SVG icons from Lucide or other Iconify-compatible sets
Kbd
Render keyboard keys and key combinations as styled keycaps
Spoiler
Hide text behind a blur until the reader hovers, focuses, or clicks to reveal it
Markdown Basics
A visual reference of all standard Markdown formatting supported by Sarde.
Kitchen Sink
Every Sarde extension on a single page. Use it as a visual reference when authoring content.