A light-weight plugin for displaying inline "badges" in Obsidian.md which acts similarly to a key-value store(database) for querying via default search or Dataview plugin.
`[!!KEY:VAL]`| syntax | details |
|---|---|
KEY |
the type and name of the ICON |
VAL |
the value and text displayed |
Important
the VAL cannot contain either the | pipe or the : colon symbols, as they are used as delimiters for the custom syntax
`[!!note:note]`
`[!!info:info]`
`[!!todo:todo]`
...
`[!!cite:cite]`
`[!!emergency: emergency]`
`[!!prohibit: prohibit]`
`[!!stop:stop]`
…
`[!!reward: reward]`
`[!!vault: vault]`
`[!!|GHX>KEY:VAL]`| syntax | details |
|---|---|
| |
start pipe symbol |
GHX |
Github style, either ghb for the blue style or ghs for the green success style |
> |
greater than symbol (delimiter) |
KEY:VAL |
KEY is the type or label, VAL is the value text displayed. e.g. release:1.0.0 |
`[!!|ghb>release:1.2.1]`
`[!!|ghb>issues:2]`
`[!!|ghb>open issues:0]`
`[!!|ghb>closed issues:2]`
`[!!|ghb>contributors:3]`
`[!!|ghb>license:MIT]`
`[!!|ghs>checks:success]`
`[!!|ghs>build:success]`
`[!!|KEY:VAL]`| syntax | details |
|---|---|
| |
start pipe symbol |
KEY:VAL |
KEY is the type, VAL is the value |
`[!!|foo:bar]`
`[!!|ICON|KEY:VAL|COLOR-RGB]`| syntax | details |
|---|---|
| |
start pipe symbol |
ICON |
name of icon. e.g. lucide-dice |
| |
pipe symbol |
KEY:VAL |
KEY is the type or label, VAL is the value text displayed. e.g. release:1.0.0 |
| |
pipe symbol |
COLOR-RGB (optional, defaults to currentColor) |
3 (R.G.B.) numeric (0-255) values, separated by commas. e.g. 144,144,144 or CSS variable e.g. var(--color-red-rgb) |
`[!!|message-square|comment:edited by j.d.|var(--color-cyan-rgb)]`
`[!!|dice|roll:eleven|120,82,238]`
`[!!|gem|mineral:emerald|var(--my-custom-rgb)]`
`[!!|apple|fruit:snack|var(--color-red-rgb)]`
`[!!|brain|brain:pkm|var(--color-purple-rgb)]`
`[!!|sun|weather:sunny|var(--color-yellow-rgb)]`
`[!!|cloudy|weather:cloudy|var(--mono-rgb-100)]`
`[!!|sunset|weather:8.44pm|var(--color-orange-rgb)]`
`[!!|dumbbell|reps:3 sets of 50|var(--mono-rgb-00)]`
`[!!|gift|event:wedding|var(--color-blue-rgb)]`
`[!!|plus-square|credit:$100|var(--color-green-rgb)]`
`[!!|minus-square|debit:$10|var(--color-pink-rgb)]`
From Obsidian's settings or preferences:
- Open in Obsidian.md
or:
- Community Plugins > Browse
- Search for "Badges"
Manually:
- download the latest release archive
- uncompress the downloaded archive
- move the
badgesfolder to/path/to/vault/.obsidian/plugins/ - Settings > Community plugins > reload Installed plugins
- enable plugin
or:
- download
main.js,manifest.json&styles.css - create a new folder
/path/to/vault/.obsidian/plugins/badges - move all 3 files to
/path/to/vault/.obsidian/plugins/badges - Settings > Community plugins > reload Installed plugins
- enable plugin
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
body {
/* border */
--inline-badge-border-color: transparent;
--inline-badge-border-radius: var(--radius-s);
--inline-badge-border: 1px solid var(--inline-badge-border-color);
/* example custom color */
--my-custom-rgb: var(--color-green-rgb);
}
/* example CSS customization */
.inline-badge[data-inline-badge^="vault"] {
--badge-color: var(--my-custom-rgb);
color: rgba(var(--badge-color), .88);
background-color: rgba(var(--badge-color),.22);
}View and copy example dataview queries: badges-dataview
cd /path/to/vault/.obsidian/plugins
git clone https://github.com/gapmiss/badges.git
cd badgesnpm i
npm run dev- open
Settings→Community plugins - enable the
Badgesplugin.
Thanks to Markdown Furigana Plugin as an example implementation of Live Preview.
Lucide Icons: https://lucide.dev
Lucide Icons LICENSE: https://lucide.dev/license
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent