Note: This plugin is being vibe coded. So, if you are not wanting AI code in your vault, please do not use this plugin. Though I am a full time Full Stack Developer so I can validate none of the code is leaking secrets or collecting personal data if that helps you.

A lightweight Obsidian plugin that extends callouts with pipe-separated metadata tokens. Add width, colors, alignment, visual effects, and custom CSS classes directly inside your markdown without writing custom HTML.

🚀 Features

🔧 Flexible Metadata Parsing

• Pipe-separated tokens: Add metadata after the callout type using |
• Order independent: Tokens can appear in any order
• Smart detection:
  • Numbers become width percentages
  • Alignment keywords are detected automatically
  • Style tokens toggle effects
  • Everything else is treated as a color
• Key/value support: Use css=my-class to inject custom CSS classes

Example:

> [!note|50|orange|center|shadow|rounded]

🎨 Dynamic Color Support

Callout colors support any CSS color value:

• Named colors:

  • red
  • orange
  • teal

• Hex:

  • #ff0088

• RGB:

  • rgb(255,100,50)

• HSL:

  • hsl(200,50%,50%)

The plugin resolves colors dynamically using the browser, meaning there is no predefined color list.

If CSS understands it, Callout Metadata understands it.

Full callout color

Add -full to a color token to also color the callout's title and content accents: bold, italic, strikethrough, highlights, links, and checklist controls.

> [!note|green-full]
> **Bold**, *italic*, ~~strikethrough~~, ==highlighted==, and completed tasks use green.
> - [x] A green task control

The suffix works with the requested named colors—red, purple, green, orange, violet, magenta, teal, blue, white, black, maroon, and yellow—and with any other valid CSS color value, such as #7c3aed-full.

📐 Width Control

Numbers automatically become width percentages.

Examples:

> [!note|25]

Creates a 25% width callout.

> [!note|73]

Creates a 73% width callout.

No CSS required.

Any value from 0-100 works.

📍 Alignment

Supported alignment tokens:

Consecutive callouts with a width and alignment can share the same row when their requested positions do not overlap. This supports two-column layouts such as 24|left + 75|right and three-column layouts such as 32|left + 32|center + 32|right. The plugin calculates the spacing needed to keep the left callout left-aligned, the center callout centered, and the right callout right-aligned. The next normal block clears the row automatically.

Example:

> [!info|60|center]

Three callouts on one row:

> [!question|32|left] Left
> Left content

> [!note|32|center] Center
> Center content

> [!tip|32|right] Right
> Right content

✨ Style Tokens

Callout Metadata includes several built-in style modifiers.

Example:

> [!warning|70|orange|shadow|rounded|glass]

🧩 Custom CSS Classes

Use:

css=my-class

to add custom CSS classes.

Examples:

> [!tip|css=gradient-bg]

Multiple classes are supported:

> [!tip|css=card,highlight]

or:

> [!tip|css=card|css=highlight]

This allows the plugin to work with your own CSS snippets without needing built-in support for every possible design.

📘 Usage

Syntax

> [!type|token|token|token] Title
> Content

All tokens can be mixed freely.

Examples:

> [!note|50]

> [!note|orange|shadow]

> [!warning|35|#ff0088|center|rounded|outline]

> [!tip|css=my-card|70|gradient|hover]

Token Reference

⚙️ Settings

The plugin includes a native settings tab.

Available customization:

• Border radius
• Shadow strength
• Shadow colors
• Outline width
• Outline style
• Outline colors

Changes apply immediately without restarting Obsidian.

🔌 Style Settings Support

Callout Metadata exposes CSS variables that can also be customized using the Style Settings plugin.

Supported variables include:

How It Works

The plugin reads metadata from rendered Obsidian callouts and applies:

Data Attributes

data-width
data-color
data-align
data-shadow
data-rounded
data-outline
data-css

Inline Styles

• Width percentage
• Callout color variables

CSS Classes

Custom classes from:

css=my-class

The included stylesheet handles built-in effects while allowing full customization through CSS snippets.

Installation

📦 Obsidian Community Plugins

Pending approval.

🧪 BRAT Installation

1. Install the BRAT plugin
2. Open BRAT settings
3. Select Add Beta Plugin
4. Enter:

DudeThatsErin/callout-metadata

5. Enable the plugin in Community Plugins

Writing Custom CSS

Examples:

/* Target a specific color */
.callout[data-color="red"] {
    border-left: 4px solid red;
}


/* Target custom classes */
.callout.gradient-bg {
    background:
        linear-gradient(
            135deg,
            #667eea,
            #764ba2
        );
}


/* Target outlined callouts */
.callout[data-outline] {
    background: transparent;
}

Support

• Discord Support: https://discord.gg/XcJWhE3SEA
• Report Issues: https://github.com/DudeThatsErin/callout-metadata/issues
• GitHub: https://github.com/DudeThatsErin/callout-metadata
• Buy Me a Coffee: https://buymeacoffee.com/erinskidds