inline-callouts

KO | EN

gitlite — search

#python #react #go #golang #android #rust #deep-learning #linux #docker #nodejs #windows #kubernetes #security #open-source

inline-callouts

(★ 39)

An Obsidian.md plugin for displaying inline "callouts" badges & icons.

inline-callouts Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Inline Callouts

## Introduction

A plugin for displaying inline "callouts" in [Obsidian.md](https://github.com/obsidianmd); a successor to the [Badges](https://github.com/gapmiss/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](https://community.obsidian.md/plugins/inline-callouts)

From Obsidian's settings or preferences:

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

Manually:

1. download the latest [release](https://github.com/gapmiss/inline-callouts/releases/latest) 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](https://github.com/gapmiss/inline-callouts/releases/latest)
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](./demo/example.md)

![](https://raw.githubusercontent.com/gapmiss/inline-callouts/master/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-15.57.34.png)

![](https://raw.githubusercontent.com/gapmiss/inline-callouts/master/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-15.57.39.png)

## Features

### "New inline callout" modal

<details style="margin-block: 1em;">
	<summary>👇️ Show GIF screencast</summary>
	
	
		<img src="https://github.com/gapmiss/inline-callouts/blob/master/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-16.28.58.gif?raw=true" alt="New Inline Callout modal" />
	
</details>

### "Modify inline callout" Modal

<details style="margin-block: 1em;">
	<summary>👇️ Show GIF screencast</summary>
	
	
		<img src="https://github.com/gapmiss/inline-callouts/blob/master/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-16.32.11.gif?raw=true" alt="Modify Inline Callout modal" />
	
</details>

### Editor auto-complete icon suggester

<details style="margin-block: 1em;">
	<summary>👇️ Show GIF screencast</summary>
	
	
		<img src="https://github.com/gapmiss/inline-callouts/blob/master/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-16.40.29.gif?raw=true" alt="Auto-complete icon suggester" />
	
</details>

### "Search for inline callouts" modal

<details style="margin-block: 1em;">
	<summary>👇️ Show GIF screencast</summary>
	
	
		<img src="https://github.com/gapmiss/inline-callouts/blob/master/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-17.19.23.gif?raw=true" alt="Icon suggestion modal" />
	
</details>

### Compatible with Style Settings plugin

<details style="margin-block: 1em;">
	<summary>👇️ Show screenshot</summary>
	
	
		<img src="https://github.com/gapmiss/inline-callouts/blob/master/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-17.24.20.png?raw=true" alt="Compatible with Style Settings plugin" />
	
</details>

### Settings

<details style="margin-block: 1em;">
	<summary>👇️ Show screenshot</summary>
	
	
		<img src="https://github.com/gapmiss/inline-callouts/blob/master/screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-06-17.23.37.png?raw=true" alt="Settings" />
	
</details>

## Usage

### Syntax

```markdown
`[!!ICON|LABEL|COLOR]`
```

| Syntax            | Details                                            |
| ----------------- | -------------------------------------------------- |
| `ICON`            | Lucide icon name, or `none`/`blank` for no icon    |
| `LABEL`(optional) | Callout label/title text                           |
| `COLOR`(optional) | Hex, RGB values, or Obsidian CSS var               |

> [!IMPORTANT]
> The `LABEL` cannot contain either the `|` pipe or the <code>`</code> 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](https://help.obsidian.md/Extending+Obsidian/CSS+snippets)

### Variables

```css
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](https://github.com/mgmeyers/obsidian-style-settings)

## Development

### Clone this repo

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

### Install packages and run

```bash
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](https://github.com/chrisgurney/obsidian-note-toolbar/)
- [javalent/admonitions](https://github.com/javalent/admonitions/)
- [Moyf/easy-copy](https://github.com/Moyf/easy-copy/)
- [nhaouari/obsidian-textgenerator-plugin](https://github.com/nhaouari/obsidian-textgenerator-plugin/)
- [steven-kraft/obsidian-markdown-furigana](https://github.com/steven-kraft/obsidian-markdown-furigana)

Thank you!

## Notes

[Lucide](https://github.com/lucide-icons/lucide) Icons: https://lucide.dev

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

inline-callouts

inline-callouts Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

inline-callouts

inline-callouts Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README