2.3 Markdown Syntax
Complete documentation of the ::syntax layout system for Standard Garden.
2.3 Standard::Syntax
The ::syntax system provides a clean, readable notation to create rich page layouts directly inside your Markdown files. It bridges the gap between plain text and advanced HTML layouts, and is fully supported in standard.garden as well as inside the Obsidian preview.
💡 Core Principles
All directives in the system begin with :: at the start of a line. There are three types of patterns:
- Smart Paragraphs: Single-line directives that automatically apply to the next paragraph or block of text.
- Inline / Standalone Patterns: Immediate directives written on a single line.
- Block Patterns: Multi-line containers that open with a directive and close with a
::end line.
1. Smart Paragraphs
These directives do not need a closing ::end marker. Write the directive on its own line, then leave a blank line and write your paragraph. The entire next paragraph will be styled with the corresponding CSS class.
<div class="hero">
This paragraph will render with a large "hero" font size.
Available Options:
::hero : Extra large introductory paragraph.::full : Paragraph stretching to full content width.::feature : Large emphasized paragraph.::editorial : Literary / editorial paragraph styling.::excerpt : Excerpt / abstract paragraph styling.::card : Encapsulates the next element inside a card container.
2. Inline and Standalone Directives
Short directives that fit on a single line with immediate content.
Inline Alerts
<aside class="note">This is a footnote or small remark.</aside>
<div class="alert">General important alert.</div>
<div class="alert warning">Cautions or important warnings.</div>
<div class="alert error">Critical error message.</div>
<div class="alert success">Successful action alert.</div>
<p class="muted">Muted text (reduced opacity).</p>
<p class="subtle">Subtle, low-contrast text.</p>
Spacers
<div class="space-2"></div>
<div class="space-4"></div>
<div class="space-6"></div>
<div class="space-8"></div>
Adds a proportional vertical spacer (small, medium, large, or extra-large).
<span stnd-preserve="6"></span>
<span stnd-preserve="7"></span>
Generates a download button for the current note assets.
Video Embeds
<div stnd-preserve="1"></div>
<div stnd-preserve="2"></div>
Automatically extracts the YouTube or Vimeo ID to render a responsive video embed. Standard MP4 or video files are also supported natively.
Dynamic Feeds and Note Lists
<div stnd-preserve="4"></div>
<div stnd-preserve="5"></div>
Creates a dynamic grid of note cards (::feed) or a bulleted list of note links (::list) displaying all public notes tagged with the specified tag. Note tags can be nested (e.g. #portfolio/portraits).
3. Block Patterns (Multi-line)
Blocks allow you to wrap text, images, or other Markdown structures between an opening directive and a closing ::end marker.
Callouts (Obsidian-style)
<div class="callout" data-callout="tip">
<div class="callout-title">
<span class="callout-icon">💡</span>
<span class="callout-title-inner">Tip</span>
</div>
<div class="callout-content">
This is a helpful tip.
You can use **Markdown** inside this box.
</div>
</div>
To make a callout collapsible, use + (open by default) or - (collapsed by default):
<details class="callout" data-callout="warning">
<summary class="callout-title">
<span class="callout-icon">⚠️</span>
<span class="callout-title-inner">Warning</span>
</summary>
<div class="callout-content">
### Attention Required
The content of this warning is collapsed by default.
</div>
</details>
Supported types: note, tip, info, warning, danger, success, question, quote, abstract, bug, example, failure, todo.
Layout Blocks (Grids and Columns)
Use --- separators on a blank line to divide the block content into multiple cells.
Equal Columns (::columns)
<div class="columns-2">
<div class="column">
Left column content.
</div>
<div class="column">
Right column content.
</div>
</div>
Cards Grid (::cards)
<div class="grid-3">
<div class="sm:row card">
### Card 1
Description for the first card.
</div>
<div class="sm:row card">
### Card 2
Description for the second card.
</div>
<div class="sm:row card">
### Card 3
Description for the third card.
</div>
</div>
Generic Grid (::grid)
<div class="grid-3">
<div class="sm:row">
First grid cell.
</div>
<div class="sm:row">
Second grid cell.
</div>
<div class="sm:row">
Third grid cell.
</div>
</div>
Asymmetric Split (::split)
<div class="grid">
<div class="sm:row col-8">
Main content area (takes 8/12 of the width).
</div>
<div class="sm:row col-4">
Sidebar area (takes 4/12 of the width).
</div>
</div>
Image Gallery
<div class="gallery grid gap-4">
<div class="col-12 md:col-4">
<img src="https://images.unsplash.com/photo-1" alt="">
</div>
<div class="col-12 md:col-4">
<img src="https://images.unsplash.com/photo-2" alt="">
</div>
<div class="col-12 md:col-4">
<img src="https://images.unsplash.com/photo-3" alt="">
</div>
</div>
Creates a responsive image grid from links or local embeds separated by ---.
<a href="https://standard.garden" class="button button-primary">Visit Website</a>
Extracts the first Markdown link defined inside and turns it into a styled button.
<div stnd-preserve="3"></div>
Renders a clean preview form. Detects field types from names (e.g. Email creates a type="email" input, Message creates a <textarea>).
Simple Layout Containers
<div class="container-hero ">
A multi-paragraph hero section.
</div>
<div class="container-small">
Centered, narrow reading container.
</div>
<div class="container-accent">
A container highlighting its contents with accent background or borders.
</div>
<details class="toggle-block">
<summary>Click to expand this section</summary>
<div class="toggle-content">
Hidden contents that appear when you click the header.
</div>
</details>
🛠️ Technical Details
- Processor file:
packages/press/typography/syntax.js
- Obsidian feature:
apps/stnd-obsidian/src/features/syntax-preview/index.js
2.4-callouts-and-alerts