From ba9f2a347696623454ca0aee92f1d510ae239503 Mon Sep 17 00:00:00 2001
From: Duncan Lock <dlock@photonic.com>
Date: Wed, 27 Mar 2024 15:02:25 +0000
Subject: [PATCH] Add Vue example

---
 examples/vue/App.vue            | 13 +++++++++++++
 examples/vue/README.md          | 20 ++++++++++++++++++++
 examples/vue/SppedHighlight.vue | 17 +++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 examples/vue/App.vue
 create mode 100644 examples/vue/README.md
 create mode 100644 examples/vue/SppedHighlight.vue

diff --git a/examples/vue/App.vue b/examples/vue/App.vue
new file mode 100644
index 0000000..3a58368
--- /dev/null
+++ b/examples/vue/App.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import SpeedHighlight from 'SpeedHighlight.vue'
+
+import { ref } from 'vue'
+
+const myCode = ref(`printf('Hello World!\n');`)
+const myLang = ref('c')
+</script>
+
+<template>
+    <p>Here is a the example code:</p>
+    <SpeedHighlight :content="myCode" :lang="myLang" />
+</template>
\ No newline at end of file
diff --git a/examples/vue/README.md b/examples/vue/README.md
new file mode 100644
index 0000000..0ff7cfd
--- /dev/null
+++ b/examples/vue/README.md
@@ -0,0 +1,20 @@
+# VueJs 3.x Example of a Speed Highlight Component
+
+## Install
+
+```console
+$ pnpm i @speed-highlight/core
+```
+
+## SpeedHighlight.vue
+
+This is a simple component that wraps `speed-highlight` and makes it easier to use in your Vue app.
+It takes two props: `content` & `lang` - and you can include it in your pages like this:
+
+```vue
+<SpeedHighlight content="printf('Hello World!\n');" lang="c" />
+```
+
+## App.vue
+
+Simplified example page/parent, to show how you include `<SpeedHighlight />` on a page.
diff --git a/examples/vue/SppedHighlight.vue b/examples/vue/SppedHighlight.vue
new file mode 100644
index 0000000..8ffa9f0
--- /dev/null
+++ b/examples/vue/SppedHighlight.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { defineProps, ref, onMounted } from 'vue'
+import { highlightText } from '@speed-highlight/core'
+import '@speed-highlight/core/dist/themes/default.css'
+
+const { content = '', lang = 'c' } = defineProps<{ content: string; lang: string }>()
+
+const highlightedCode = ref('')
+
+onMounted(async () => {
+    highlightedCode.value = await highlightText(content, lang)
+})
+</script>
+
+<template>
+  <div :class="`shj-lang-${lang}`" v-html="highlightedCode"></div>
+</template>
\ No newline at end of file