1.1.1 - Obsidian Community Fixes

• Removed Callout Metadata Variants markdown file from release
• Removed the use of !important in the CSS.

1.1.0 - Bugfixes & Performance Improvements

• Moved from a TS plugin to a JS plugin which included performance fixes.
• Widths and other options weren't working, everything now works.
• Included a callout metadata variants markdown file so you can see how the callouts will look in your vault. It is also included in this release.
• Other misc bugfixes.

1.0.2

Same as the last one - just fixing errors that are causing it to fail when running it through Obsidian's checker.

1.0.1

This is just a simple update to get the plugin listed on the Obsidian community store so you can download it within Obsidian rather than using BRAT.

Callout Metadata v1.0.0

Initial release of Callout Metadata, an Obsidian plugin that adds flexible styling controls to callouts directly from your Markdown.

✨ Features

Metadata Tokens

• Added pipe-separated metadata syntax for callouts:
  • width percentages
  • colors
  • alignment
  • styling flags
  • custom CSS classes

Example:

> [!note|50|orange|center|shadow|rounded]
> Styled callout without custom CSS

Width Control

Add any number from 0-100 to control callout width.
Width can be placed anywhere in the metadata list.

Examples:

> [!note|50]
> 50% width

> [!note|orange|75]
> Orange callout at 75% width

Dynamic Color Support

• Supports any CSS color format:
• Named colors (red, orange, teal)
• Hex colors (#ff6600)
• RGB colors (rgb(255,100,50))
• RGBA colors (rgba(255,100,50,0.5))
• HSL colors

Examples:

> [!quote|#ff6600]
> Custom hex color

> [!quote|rgba(255,100,50,0.5)]
> Transparent custom color

> [!note|orange]
> orange color

Alignment

Added support for horizontal alignment:

> [!note|center]
> Center aligned

> [!note|right]
> Right aligned

Supported values:

• left
• center
• right

Styling Tokens

Added built-in styling modifiers:

Token	Description
shadow	Adds a configurable shadow
rounded	Adds rounded corners
outline	Adds an outline border using the callout color

Example:

> [!warning|shadow|rounded|outline]
> Styled warning callout

Custom CSS Classes

Added support for attaching custom CSS classes:

> [!tip|css=my-class]
> Uses your custom CSS snippet

Multiple classes are supported:

> [!tip|css=card,highlight]
> Multiple classes applied

⚙️ Settings

Added a native settings tab for visual customization:

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

These settings only apply when the corresponding metadata token is used.

For example:

• Border radius settings affect callouts using rounded
• Shadow settings affect callouts using shadow
• Outline settings affect callouts using outline

Callouts without those tokens remain unchanged.

🛠️ Technical Improvements

• Added runtime CSS variable injection
• Added automatic processing of rendered callouts
• Added support for live updates when switching themes
• Added support for reading view and live preview
• Added custom CSS class injection without requiring plugin updates

📦 Installation

Install through the community plugins store once it is available. Before that you can use BRAT.

📝 Notes

This is the first public release of Callout Metadata.

The plugin is actively being developed. Feedback, bug reports, feature requests, and contributions are welcome.

🙏 Support

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