From 0d8411cb73333e7f52c87c9b5c05c95ba8a39d09 Mon Sep 17 00:00:00 2001
From: gapmiss <98914514+gapmiss@users.noreply.github.com>
Date: Fri, 4 Apr 2025 19:49:32 -0500
Subject: [PATCH] Demonstration

---
 README.md       |  7 +++++--
 demo/example.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 demo/example.md

diff --git a/README.md b/README.md
index 58961da..f21d6b9 100644
--- a/README.md
+++ b/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)
 
diff --git a/demo/example.md b/demo/example.md
new file mode 100644
index 0000000..da77b58
--- /dev/null
+++ b/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)]`
+