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.

📐 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:

Example:

> [!info|60|center]

✨ 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