From b1ef3cbd1b1b897d56d49902789ee11def61c8ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3zsa=20Zolt=C3=A1n?= <dev@datarose.net>
Date: Sat, 2 Sep 2023 13:21:05 +0200
Subject: [PATCH 1/3] feat: v-html support (optional)

---
 src/components/VOnboardingStep.vue | 7 ++++++-
 src/types/StepEntity.d.ts          | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/VOnboardingStep.vue b/src/components/VOnboardingStep.vue
index 13eca98..22dc40c 100644
--- a/src/components/VOnboardingStep.vue
+++ b/src/components/VOnboardingStep.vue
@@ -29,7 +29,12 @@
             </button>
           </div>
           <p
-            v-if="step.content.description"
+            v-if="step.content.description && step.content.html"
+            class="v-onboarding-item__description"
+            v-html="step.content.description"
+          />
+          <p
+            v-else-if="step.content.description"
             class="v-onboarding-item__description"
           >{{ step.content.description }}</p>
           <div class="v-onboarding-item__actions">
diff --git a/src/types/StepEntity.d.ts b/src/types/StepEntity.d.ts
index 7ad6f78..3311c1d 100644
--- a/src/types/StepEntity.d.ts
+++ b/src/types/StepEntity.d.ts
@@ -6,6 +6,7 @@ export interface StepEntity {
   content?: {
     title: string;
     description?: string;
+    html?: boolean
   }
   on?: {
     beforeStep?: () => void | Promise<void>

From eff9a33960c1151164089e9001201c2c1236993d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3zsa=20Zolt=C3=A1n?= <dev@datarose.net>
Date: Sat, 2 Sep 2023 13:31:42 +0200
Subject: [PATCH 2/3] docs: added description to `steps.content.html`

---
 docs/pages/3.props/1.steps.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/pages/3.props/1.steps.md b/docs/pages/3.props/1.steps.md
index e2f04e8..4338713 100644
--- a/docs/pages/3.props/1.steps.md
+++ b/docs/pages/3.props/1.steps.md
@@ -13,6 +13,7 @@ title: steps
   content: {
     title: "..."
     description: "..."
+    html: false
   },
   on: {
     beforeStep: function() {},
@@ -29,6 +30,7 @@ title: steps
 | `content` | `Object` | **Optional** |
 | `content.title` | `String` | **Optional** | Title to use in onboarding step |
 | `content.description` | `String` | **Optional** | Description to use in onboarding step |
+| `content.html` | `Boolean` | **Optional** | If its set to `true`, the `content.description` will be rendered in the default template using [`v-html`](https://vuejs.org/guide/essentials/template-syntax.html#raw-html) |
 | `on` | `Object` | **Optional** |
 | `on.beforeStep` | `Function` `AsyncFunction` | **Optional** | Function to run before showing the step |
 | `on.afterStep ` | `Function` `AsyncFunction` | **Optional** | Function to run after showing the step |

From 4b7a0661c186af8a46aee90ca365add06be96513 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3zsa=20Zolt=C3=A1n?= <dev@datarose.net>
Date: Sat, 2 Sep 2023 13:34:12 +0200
Subject: [PATCH 3/3] demo: added steps.options.html example

---
 demo/src/App.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 3768b62..55e35ba 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -77,7 +77,8 @@ export default defineComponent({
         },
         content: {
           title: 'Nice to see you here!',
-          description: 'You can use v-onboarding to show some information about your app, or to explain how to use it',
+          description: 'You can use <strong>v-onboarding</strong> to show some information about your app, or to explain how to use it',
+          html: true
         }
       },
       {