From 4b7d686754e69990b3031e8bbf63f1c1ceda0627 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 29 Mar 2023 16:49:59 -0400
Subject: [PATCH] prettier + highlighter

---
 docs/frameworks/vue.md | 37 +++++++++++++++++--------------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/docs/frameworks/vue.md b/docs/frameworks/vue.md
index 1d4ba5cf9..692210b50 100644
--- a/docs/frameworks/vue.md
+++ b/docs/frameworks/vue.md
@@ -58,7 +58,7 @@ Now you can start using Shoelace components in your app!
 
 ### QR code generator example
 
-```vue
+```html
 <template>
   <div class="container">
     <h1>QR code generator</h1>
@@ -70,22 +70,22 @@ Now you can start using Shoelace components in your app!
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import '@shoelace-style/shoelace/dist/components/qr-code/qr-code.js';
-import '@shoelace-style/shoelace/dist/components/input/input.js';
+  import { ref } from 'vue';
+  import '@shoelace-style/shoelace/dist/components/qr-code/qr-code.js';
+  import '@shoelace-style/shoelace/dist/components/input/input.js';
 
-const qrCode = ref();
+  const qrCode = ref();
 </script>
 
 <style>
-.container {
-  max-width: 400px;
-  margin: 0 auto;
-}
+  .container {
+    max-width: 400px;
+    margin: 0 auto;
+  }
 
-sl-input {
-  margin: var(--sl-spacing-large) 0;
-}
+  sl-input {
+    margin: var(--sl-spacing-large) 0;
+  }
 </style>
 ```
 
@@ -101,15 +101,12 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
 
 ### Slots
 
-To use Shoelace components with slots, follow the Vue documentation on using [slots with custom elements.](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue) Here is an example:
+To use Shoelace components with slots, follow the Vue documentation on using [slots with custom elements](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue).
 
-```vue
-<sl-drawer
-  label="Drawer"
-  placement="start"
-  class="drawer-placement-start"
-  :open="drawerIsOpen"
->
+Here is an example:
+
+```html
+<sl-drawer label="Drawer" placement="start" class="drawer-placement-start" :open="drawerIsOpen">
   This drawer slides in from the start.
   <div slot="footer">
     <sl-button variant="primary" @click=" drawerIsOpen = false">Close</sl-button>