Inline Callouts

Introduction

A plugin for displaying inline "callouts" in Obsidian.md, a successor to the Badges plugin by the same author. Key differences: simpler syntax, access to all Lucide icons used by Obsidian, modal interfaces for icon suggestions, new inline callout and modify inline callout.

• Features
• Usage
• Caveats
• Installation
• CSS styles
• Style Settings plugin
• Development
• Credits
• Notes

Features

Usage

Syntax

`[!!ICON|LABEL|COLOR]`

Syntax	Details
ICON	name of the Lucide icon
LABEL(optional)	callout label/title text
COLOR(optional)	RGB values or Obsidian CSS var

Important

The LABEL cannot contain either the | pipe or the ` backtick symbols, as they are used as delimiters for the custom syntax.

Caveats

• No extraneous | or ` characters
• Consecutive callouts must be separated by at lease one space, character, or line return to be rendered correctly in reading view.
• Does not work inside a wiki-link
• Markdown and HTML code is NOT rendered in the callout label
• When using inline callouts in a table, the pipe characters must be escaped. e.g.:

  | example one                              | example two                   |
  | ---------------------------------------- | ----------------------------- |
  | `[!!info\|Lorem\|var(--color-blue-rgb)]` | Lorem ipsum `[!!check-check]` |
  

Installation

From Obsidian's settings or preferences:

1. Open in Obsidian.md

or:

1. Community Plugins > Browse
2. Search for "Badges"

Manually:

1. download the latest release archive
2. uncompress the downloaded archive
3. move the inline-callouts folder to /path/to/vault/.obsidian/plugins/
4. Settings > Community plugins > reload Installed plugins
5. enable plugin

or:

1. download main.js, manifest.json & styles.css
2. create a new folder /path/to/vault/.obsidian/plugins/inline-callouts
3. move all 3 files to /path/to/vault/.obsidian/plugins/inline-callouts
4. Settings > Community plugins > reload Installed plugins
5. enable plugin

CSS

Custom CSS styles can be applied via CSS snippets. All colors and styles can be over-written just the same.

See CSS snippets - Obsidian Help

variables

body {
    --inline-callout-font-size: .85em;
    --inline-callout-font-weight: 400;
    --inline-callout-border-radius: 4px;
    --inline-callout-bg-transparency: .1;
    --inline-callout-margin: 1px;
    --inline-callout-padding-top: 1px;
    --inline-callout-padding-right: 0px;
    --inline-callout-padding-bottom: 2px;
    --inline-callout-padding-left: 0px;
    --inline-callout-icon-size: .85em;
    --inline-callout-icon-margin-top: 3px;
    --inline-callout-icon-margin-right: 3px;
    --inline-callout-icon-margin-bottom: 0px;
    --inline-callout-icon-margin-left: 5px;
    --inline-callout-label-margin-top: 2px;
    --inline-callout-label-margin-right: 5px;
    --inline-callout-label-margin-bottom: 0px;
    --inline-callout-label-margin-left: 2px;
}

Style Settings plugin

All the above CSS variables can be modified via the Style Settings plugin

Development

Clone this repo

cd /path/to/vault/.obsidian/plugins
git clone https://github.com/gapmiss/inline-callouts.git
cd inline-callouts

Install packages and run

pnpm i
pnpm run dev

Enable plugin

1. open Settings → Community plugins
2. enable the Inline Callouts plugin.

Credits

Some code inspired by and derived from:

• chrisgurney/obsidian-note-toolbar
• javalent/admonitions
• Moyf/easy-copy
• nhaouari/obsidian-textgenerator-plugin
• steven-kraft/obsidian-markdown-furigana

Thank you!

Notes

Lucide Icons: https://lucide.dev

Lucide Icons LICENSE: https://lucide.dev/license