Inline Callouts

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 in Obsidian, modal interfaces for icon suggestions, new inline callout and modify inline callout.

Installation

[!IMPORTANT] Requires Obsidian v1.13.0 or later. The settings tab uses the declarative settings API introduced in that version, so the plugin will not install on earlier releases. Vaults below v1.13.0 will continue to be offered v0.1.12, the last compatible release.

Install from community.obsidian.md

From Obsidian's settings or preferences:

1. Community Plugins > Browse
2. Search for "Inline Callouts"

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 from the latest release
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

Demo

[!NOTE] See demo markdown file here

Features

"New inline callout" modal

"Modify inline callout" Modal

Editor auto-complete icon suggester

"Search for inline callouts" modal

Compatible with Style Settings plugin

Settings

Usage

Syntax

`[!!ICON|LABEL|COLOR]`

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

Caveats

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

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

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-family: inherit;
    --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;
}

Obsidian.md RGB color variables

var(--mono-rgb-0)
var(--mono-rgb-100)
var(--color-red-rgb)
var(--color-orange-rgb)
var(--color-yellow-rgb)
var(--color-green-rgb)
var(--color-cyan-rgb)
var(--color-blue-rgb)
var(--color-purple-rgb)
var(--color-pink-rgb)

Style Settings plugin

The above --inline-callout-* 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

npm i
npm 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