Usage Guide · Türkçe · Report Bug

Special Callouts for Obsidian

Transform your Obsidian notes with premium, dynamic, and fully customizable callouts. Turn generic boxes into magazine-quality layouts, code terminals, or neon-glowing alerts. Customize everything directly from your markdown — or create reusable presets in the visual settings panel.

Open source · MIT License · Contributions welcome

Features

• Inline customization — background, text, border, gradient, neon, icon — directly in markdown
• Custom style presets — design once, reuse by name
• Multi-column lists — split any list into 2–4 columns
• Visual layout builder — drag-and-merge grid designer
• Typography control — 5 font families, 5 size scales
• Neon and gradient effects — glowing borders, smooth color transitions
• Dataview integration — column layouts work with Dataview queries
• Import/Export — share styles as JSON between vaults

Quick Start

Inline Parameters

Add parameters inside parentheses right after the callout type:

> [!note] (bg:#2ecc71, text:white) Hello World
> This is a green callout with white text.

Custom Presets

Create a style in Settings → Special Callouts, name it (e.g., terminal), and use it anywhere:

> [!terminal]
> System ready.
> Waiting for command...

Or apply it to any standard callout:

> [!info] (style:terminal)
> This info box now looks like a terminal.

Screenshots

Colors, Gradients and Effects

Visual Layout Builder

Design complex dashboard grids by dragging and merging cells — no code required. Access from Settings → Special Callouts → Visual Layout Builder.

Dashboard Grids

Use the visual builder or inline grid syntax to create multi-panel layouts. Callouts are automatically placed into the merged areas you designed.

Typography and Borders

Multi-Column Lists

Examples

Gradients

> [!tip] (gradient:#667eea-#764ba2, text:white) Purple Gradient
> Separate two colors with a hyphen.

Multi-Column

> [!note] (col:3, bg:#2c3e50, text:#ecf0f1) Skills
> - HTML     - TypeScript
> - CSS      - React
> - JS       - Node.js

Grid Layout

> [!multi-callout]
> > [!info] (1:2, bg:#3498db, text:white) Left Panel
> > Content here.
>
> > [!tip] (2:2, bg:#2ecc71, text:white) Right Panel
> > Content here.

Neon Glow

> [!danger] (neon:#ff0000, bg:#1a0000, text:#ff6b6b) Alert
> Glowing border and box-shadow. Best on dark backgrounds.

See the Usage Guide for all examples and parameters.

Metadata Reference

> [!type] (param:value, param2:value2) Title

Colors

Borders

Typography

Layout

Full reference in the Usage Guide.

Installation

Community Plugins (Recommended)

1. Settings → Community Plugins
2. Turn off Restricted Mode
3. Browse → search Special Callouts
4. Install → Enable

Or open directly: community.obsidian.md/plugins/special-callouts

Manual

1. Download main.js, styles.css, manifest.json from the latest release
2. Create VaultFolder/.obsidian/plugins/special-callouts/
3. Copy the files into the folder
4. Enable in Settings → Community Plugins

Contributing

• Bug reports: Open an issue — include Obsidian version, callout markdown, and a screenshot
• Feature requests: Open an issue
• Pull requests: Fork → Branch → Code → PR

If you find this plugin useful, consider giving it a star.

License

MIT — See LICENSE for details.

Developed by ahseyg