Demonstration

README.md

@@ -4,7 +4,7 @@
 
 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 used by Obsidian, modal interfaces for icon suggestions, new inline callout and modify inline callout.
 
-- [Examples](#examples)
+- [Demo](#demo)
 - [Features](#features)
 - [Usage](#usage)
 - [Caveats](#caveats)
@@ -15,7 +15,10 @@ A plugin for displaying inline "callouts" in [Obsidian.md](https://github.com/ob
 - [Credits](#credits)
 - [Notes](#notes)
 
-## Examples
+## Demo
+
+> [!NOTE]
+> See demo markdown file [here](./demo/example.md)
 
 ![](./screenshots/Inline-Callouts-demo-Obsidian-v1.8.9-2025-04-04-18.26.34.png)
 

demo/example.md

@@ -0,0 +1,46 @@
+`[!!info|Info|var(--color-blue-rgb)]` `[!!lucide-pencil|Note|var(--color-blue-rgb)]` `[!!clipboard-list|Summary|var(--color-cyan-rgb)]`  `[!!flame|Tip|var(--color-cyan-rgb)]` `[!!check|Success|var(--color-green-rgb)]` `[!!question-mark-glyph|Question|var(--color-orange-rgb)]` `[!!alert-triangle|Warning|var(--color-orange-rgb)]` `[!!x|Failure|var(--color-red-rgb)]` `[!!zap|Danger|var(--color-red-rgb)]` `[!!bug|Bug|var(--color-red-rgb)]` `[!!list|Example|var(--color-purple-rgb)]` `[!!quote|Quote|158, 158, 158]` `[!!vault|Vault|var(--color-purple-rgb)]`
+
+
+
+`[!!chevrons-right||var(--color-green-rgb)]` Adipiscing fugiat sint excepteur `[!!hard-hat|laboris|var(--color-orange-rgb)]`. Ut `[!!magnet|magna|var(--color-red-rgb)]`  et lorem enim, sunt veniam qui. Lorem, enim sunt `[!!swords|veniam|var(--color-purple-rgb)]`  qui et laboris reprehenderit. Veniam qui et laboris reprehenderit, ad. Laboris reprehenderit, ad commodo.`[!!question-mark-glyph||var(--color-purple-rgb)]` 
+
+
+
+`[!!info||var(--color-blue-rgb)]` `[!!lucide-pencil||var(--color-blue-rgb)]` `[!!clipboard-list||var(--color-cyan-rgb)]`  `[!!flame||var(--color-cyan-rgb)]` `[!!check||var(--color-green-rgb)]` `[!!question-mark-glyph||var(--color-orange-rgb)]` `[!!alert-triangle||var(--color-orange-rgb)]` `[!!x||var(--color-red-rgb)]` `[!!zap||var(--color-red-rgb)]` `[!!bug||var(--color-red-rgb)]` `[!!list||var(--color-purple-rgb)]` `[!!quote||158, 158, 158]` `[!!vault||var(--color-purple-rgb)]`
+
+
+
+- [ ] Lorem ipsum dolor sit amet `[!!message-circle-question||var(--color-pink-rgb)]`
+- [ ] [`[!!github|Github repo|var(--color-blue-rgb)]`](https://github.com/gapmiss/inline-callouts/)
+- [ ] `[!!chevrons-up||var(--color-red-rgb)]`  dolor sit amet, consectetur adipiscing
+
+
+
+> `[!!octagon-alert|Lorem ipsum|var(--color-red-rgb)]`  dolor sit amet, consectetur adipiscing elit, sed do eiusmod `[!!zap||var(--color-red-rgb)]` tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+- `[!!hand|Lorem ipsum|var(--color-pink-rgb)]` dolor sit amet, consectetur adipiscing elit
+- Lorem ipsum dolor sit amet, consectetur adipiscing elit `[!!check-check||var(--color-green-rgb)]`
+	1. `[!!info|Lorem ipsum|var(--color-blue-rgb)]`
+	2. Lorem ipsum `[!!check||var(--color-green-rgb)]`
+
+
+
+| one | two |
+| --- |  --- |
+| `[!!info\|Lorem ipsum\|var(--color-blue-rgb)]` | Lorem ipsum `[!!check-check\|\|var(--color-green-rgb)]` |
+
+
+
+> [!INFO]+ Title
+> `[!!info|Lorem ipsum|var(--color-cyan-rgb)]` dolor sit amet. Aut exercitationem `[!!check-check||var(--color-green-rgb)]`
+
+
+
+# Lorem ipsum `[!!info|dolor|8, 109, 221]`
+
+## Lorem ipsum `[!!info|dolor|var(--color-orange-rgb)]`
+
+###### Lorem ipsum `[!!info|dolor|var(--color-green-rgb)]`
+