From cb585f706c0ece27d91197d51b27e1e651eefc87 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Thu, 6 Nov 2025 16:48:19 -0800
Subject: [PATCH 1/2] feat(vue): add code highlighting

---
 src/theme/prism-include-languages.ts   | 49 ++++++++++++++++++++++++++
 src/theme/prism-languages/prism-vue.ts | 44 +++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 src/theme/prism-include-languages.ts
 create mode 100644 src/theme/prism-languages/prism-vue.ts

diff --git a/src/theme/prism-include-languages.ts b/src/theme/prism-include-languages.ts
new file mode 100644
index 0000000000..032dfd597e
--- /dev/null
+++ b/src/theme/prism-include-languages.ts
@@ -0,0 +1,49 @@
+/**
+ * Prism is used to syntax highlight code blocks in markdown files.
+ *
+ * Original source:
+ * @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/prism-include-languages.ts
+ *
+ * Reason for overriding:
+ * - Add Vue language support since it's not included in Prism
+ */
+
+import siteConfig from '@generated/docusaurus.config';
+import type * as PrismNamespace from 'prismjs';
+import type { Optional } from 'utility-types';
+
+export default function prismIncludeLanguages(PrismObject: typeof PrismNamespace): void {
+  const {
+    themeConfig: { prism },
+  } = siteConfig;
+  const { additionalLanguages } = prism as { additionalLanguages: string[] };
+
+  // Prism components work on the Prism instance on the window, while prism-
+  // react-renderer uses its own Prism instance. We temporarily mount the
+  // instance onto window, import components to enhance it, then remove it to
+  // avoid polluting global namespace.
+  // You can mutate PrismObject: registering plugins, deleting languages... As
+  // long as you don't re-assign it
+
+  const PrismBefore = globalThis.Prism;
+  globalThis.Prism = PrismObject;
+
+  additionalLanguages.forEach((lang) => {
+    if (lang === 'php') {
+      // eslint-disable-next-line global-require
+      require('prismjs/components/prism-markup-templating.js');
+    }
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    require(`prismjs/components/prism-${lang}`);
+  });
+
+  // CUSTOM CODE
+  require('../theme/prism-languages/prism-vue');
+  // CUSTOM CODE END
+
+  // Clean up and eventually restore former globalThis.Prism object (if any)
+  delete (globalThis as Optional<typeof globalThis, 'Prism'>).Prism;
+  if (typeof PrismBefore !== 'undefined') {
+    globalThis.Prism = PrismObject;
+  }
+}
diff --git a/src/theme/prism-languages/prism-vue.ts b/src/theme/prism-languages/prism-vue.ts
new file mode 100644
index 0000000000..a63b281220
--- /dev/null
+++ b/src/theme/prism-languages/prism-vue.ts
@@ -0,0 +1,44 @@
+(function (Prism) {
+  Prism.languages.vue = Prism.languages.extend('markup', {
+    // Add Vue template interpolation (e.g., {{ expression }})
+    interpolation: {
+      pattern: /\{\{[^}]+\}\}/,
+      inside: {
+        punctuation: /\{\{|\}\}/,
+        expression: {
+          pattern: /[\s\S]+/,
+          inside: Prism.languages.javascript,
+        },
+      },
+    },
+
+    // Add Vue-specific attributes (v-bind, @click, :prop)
+    attribute: {
+      pattern: /(^|["'\s])(?:v-|:|\@|#)[\w-]+(?:\.[\w-]+)*(?=[^\w-])(?=[^=>]*=)/,
+      lookbehind: true,
+      alias: 'keyword',
+    },
+  });
+
+  Prism.languages.insertBefore('vue', 'comment', {
+    script: {
+      pattern: /<script[\s\S]*?>[\s\S]*?<\/script>/i,
+      inside: {
+        rest: Prism.languages.javascript,
+      },
+      alias: 'language-javascript',
+    },
+    style: {
+      pattern: /<style[\s\S]*?>[\s\S]*?<\/style>/i,
+      inside: {
+        rest: Prism.languages.css,
+      },
+      alias: 'language-css',
+    },
+  });
+
+  Prism.languages.html = Prism.languages.vue;
+  Prism.languages.markup = Prism.languages.vue;
+
+  Prism.languages.v = Prism.languages.vue;
+})(Prism);

From 5a5616733057cb71cac2bd0838e60c950384438f Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Wed, 12 Nov 2025 16:57:01 -0800
Subject: [PATCH 2/2] refactor(vue): add correct highlight to style and script
 tags

---
 docs/vue/build-options.md                     |  10 +-
 docs/vue/lifecycle.md                         |   4 +-
 docs/vue/navigation.md                        |  28 +--
 docs/vue/performance.md                       |  18 +-
 docs/vue/quickstart.md                        |  72 +++----
 docs/vue/slides.md                            | 190 ++++++++---------
 docs/vue/troubleshooting.md                   |   8 +-
 docs/vue/utility-functions.md                 |   2 +-
 docs/vue/virtual-scroll.md                    |  10 +-
 src/styles/components/_code.scss              |   3 +-
 src/theme/prism-languages/prism-vue.ts        |  16 +-
 .../version-v7/vue/build-options.md           |  10 +-
 versioned_docs/version-v7/vue/lifecycle.md    |   4 +-
 versioned_docs/version-v7/vue/navigation.md   |  28 +--
 versioned_docs/version-v7/vue/performance.md  |  18 +-
 versioned_docs/version-v7/vue/quickstart.md   |  72 +++----
 versioned_docs/version-v7/vue/slides.md       | 194 +++++++++---------
 .../version-v7/vue/troubleshooting.md         |   8 +-
 .../version-v7/vue/utility-functions.md       |   2 +-
 .../version-v7/vue/virtual-scroll.md          |  12 +-
 20 files changed, 361 insertions(+), 348 deletions(-)

diff --git a/docs/vue/build-options.md b/docs/vue/build-options.md
index 5a43eaf6fb..8d27698cfd 100644
--- a/docs/vue/build-options.md
+++ b/docs/vue/build-options.md
@@ -28,7 +28,7 @@ Also note that locally registered components are not available in subcomponents.
 
 Let's take a look at how local component registration works:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -38,8 +38,8 @@ Let's take a look at how local component registration works:
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonPage } from '@ionic/vue';
-  import SubComponent from '@/components/SubComponent.vue';
+import { IonContent, IonPage } from '@ionic/vue';
+import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
@@ -70,7 +70,7 @@ app.component('ion-page', IonPage);
 
 **MyComponent.vue**
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -80,7 +80,7 @@ app.component('ion-page', IonPage);
 </template>
 
 <script setup lang="ts">
-  import SubComponent from '@/components/SubComponent.vue';
+import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.md
index f6c5fa5423..a1262c0033 100644
--- a/docs/vue/lifecycle.md
+++ b/docs/vue/lifecycle.md
@@ -21,7 +21,7 @@ These lifecycles are only called on components directly mapped by a router. This
 
 The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component:
 
-```tsx
+```vue
 <script setup lang="ts">
 import { IonPage } from '@ionic/vue';
 
@@ -47,7 +47,7 @@ const ionViewWillLeave = () => {
 
 These lifecycles can also be expressed using Vue 3's Composition API:
 
-```tsx
+```vue
 <script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
 
diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md
index 24d9ea2d8d..b77a19ba7e 100644
--- a/docs/vue/navigation.md
+++ b/docs/vue/navigation.md
@@ -103,7 +103,7 @@ Say we start on the `home` route, and we want to add a button that takes us to t
 
 We can also programmatically navigate in our app by using the router API:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -113,10 +113,10 @@ We can also programmatically navigate in our app by using the router API:
 </template>
 
 <script setup lang="ts">
-  import { IonButton, IonContent, IonPage } from '@ionic/vue';
-  import { useRouter } from 'vue-router';
+import { IonButton, IonContent, IonPage } from '@ionic/vue';
+import { useRouter } from 'vue-router';
 
-  const router = useRouter();
+const router = useRouter();
 </script>
 ```
 
@@ -364,7 +364,7 @@ Here, our `tabs` path loads a `Tabs` component. We provide each tab as a route o
 
 Let's start by taking a look at our `Tabs` component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-tabs>
@@ -390,8 +390,8 @@ Let's start by taking a look at our `Tabs` component:
 </template>
 
 <script setup lang="ts">
-  import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
-  import { ellipse, square, triangle } from 'ionicons/icons';
+import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
+import { ellipse, square, triangle } from 'ionicons/icons';
 </script>
 ```
 
@@ -494,7 +494,7 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header>
@@ -507,7 +507,7 @@ The `IonPage` component wraps each view in an Ionic Vue app and allows page tran
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
@@ -550,7 +550,7 @@ Notice that we have now added `:id` to the end of our `detail` path string. URL
 
 Let's look at how to use it in our component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header>
@@ -564,11 +564,11 @@ Let's look at how to use it in our component:
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { useRoute } from 'vue-router';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { useRoute } from 'vue-router';
 
-  const route = useRoute();
-  const { id } = route.params;
+const route = useRoute();
+const { id } = route.params;
 </script>
 ```
 
diff --git a/docs/vue/performance.md b/docs/vue/performance.md
index c767f2aa8b..b3206fd76e 100644
--- a/docs/vue/performance.md
+++ b/docs/vue/performance.md
@@ -11,7 +11,7 @@ When using `v-for` with Ionic components, we recommend using Vue's `key` attribu
 
 By using `key` you can provide a stable identity for each loop element so Vue can track insertions and deletions within the iterator. Below is an example of how to use `key`:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -23,14 +23,14 @@ By using `key` you can provide a stable identity for each loop element so Vue ca
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
-  import { ref } from 'vue';
-
-  const items = ref([
-    { id: 0, value: 'Item 0' },
-    { id: 1, value: 'Item 1' },
-    ...
-  ]);
+import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
+import { ref } from 'vue';
+
+const items = ref([
+  { id: 0, value: 'Item 0' },
+  { id: 1, value: 'Item 1' },
+  ...
+]);
 </script>
 ```
 
diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index 8ff548436d..6f96596157 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -74,7 +74,7 @@ Let's walk through these files to understand the app's structure.
 
 The root of your app is defined in `App.vue`:
 
-```tsx
+```vue
 <template>
   <ion-app>
     <ion-router-outlet />
@@ -123,7 +123,7 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 The Home page component, defined in `views/HomePage.vue`, imports the Ionic components and defines the page template:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -153,7 +153,7 @@ The Home page component, defined in `views/HomePage.vue`, imports the Ionic comp
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 
 <!-- ...styles... -->
@@ -169,7 +169,7 @@ For detailed information about Ionic layout components, see the [Header](/docs/a
 
 You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) at the end of the `ion-content`:
 
-```html
+```vue
 <ion-content>
   <!-- existing content -->
 
@@ -179,9 +179,9 @@ You can enhance your Home page with more Ionic UI components. For example, add a
 
 Then, import the `IonButton` component in the `<script>` tag:
 
-```html
+```vue
 <script setup lang="ts">
-  import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
@@ -189,7 +189,7 @@ Then, import the `IonButton` component in the `<script>` tag:
 
 Create a new page at `views/NewPage.vue`:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -212,7 +212,7 @@ Create a new page at `views/NewPage.vue`:
 </template>
 
 <script setup lang="ts">
-  import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
@@ -255,7 +255,7 @@ const routes: Array<RouteRecordRaw> = [
 
 Once that is done, update the button in `views/HomePage.vue`:
 
-```tsx
+```vue
 <ion-button router-link="/new">Navigate</ion-button>
 ```
 
@@ -269,16 +269,16 @@ Ionic Vue comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You c
 
 Update the imports in `views/NewPage.vue` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
-```html
+```vue
 <script setup lang="ts">
-  import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { heart, logoIonic } from 'ionicons/icons';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { heart, logoIonic } from 'ionicons/icons';
 </script>
 ```
 
 Then, include them inside of the `ion-content`:
 
-```tsx
+```vue
 <ion-icon :icon="heart"></ion-icon>
 <ion-icon :icon="logoIonic"></ion-icon>
 ```
@@ -293,7 +293,7 @@ Let's add a button that can scroll the content area to the bottom.
 
 Update `views/NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
 
-```html
+```vue
 <ion-content ref="content">
   <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
 
@@ -306,29 +306,29 @@ Update `views/NewPage.vue` to include a ref on `ion-content` and a button and so
 
 In the script section, add the new component imports and define the `scrollToBottom` function:
 
-```html
+```vue
 <script setup lang="ts">
-  import {
-    IonBackButton,
-    IonButtons,
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonIcon,
-    IonItem,
-    IonLabel,
-    IonPage,
-    IonTitle,
-    IonToolbar,
-  } from '@ionic/vue';
-  import { heart, logoIonic } from 'ionicons/icons';
-  import { ref } from 'vue';
-
-  const content = ref();
-
-  const scrollToBottom = () => {
-    content.value.$el.scrollToBottom(300);
-  };
+import {
+  IonBackButton,
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/vue';
+import { heart, logoIonic } from 'ionicons/icons';
+import { ref } from 'vue';
+
+const content = ref();
+
+const scrollToBottom = () => {
+  content.value.$el.scrollToBottom(300);
+};
 </script>
 ```
 
diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index 0a9d531d4e..e55c22a097 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -48,10 +48,10 @@ Next, we need to import the base Swiper styles. We are also going to import the
 
 We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
 
-```html
+```vue
 <script setup lang="ts">
-  import 'swiper/css';
-  import '@ionic/vue/css/ionic-swiper.css';
+import 'swiper/css';
+import '@ionic/vue/css/ionic-swiper.css';
 </script>
 ```
 
@@ -92,7 +92,7 @@ Swiper exports two components: `Swiper` and `SwiperSlide`. The `Swiper` componen
 
 These components are imported from `swiper/vue` and provided to your Vue component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -106,11 +106,11 @@ These components are imported from `swiper/vue` and provided to your Vue compone
 </template>
 
 <script setup lang="ts">
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage } from '@ionic/vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage } from '@ionic/vue';
 
-  import 'swiper/css';
-  import '@ionic/vue/css/ionic-swiper.css';
+import 'swiper/css';
+import '@ionic/vue/css/ionic-swiper.css';
 </script>
 ```
 
@@ -122,7 +122,7 @@ By default, Swiper for Vue does not import any additional modules. To use module
 
 To begin, we need to import the modules and their corresponding CSS files from the `swiper` package:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -135,23 +135,23 @@ To begin, we need to import the modules and their corresponding CSS files from t
   </ion-page>
 </template>
 <script setup lang="ts">
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage } from '@ionic/vue';
-
-  import 'swiper/css';
-  import 'swiper/css/autoplay';
-  import 'swiper/css/keyboard';
-  import 'swiper/css/pagination';
-  import 'swiper/css/scrollbar';
-  import 'swiper/css/zoom';
-  import '@ionic/vue/css/ionic-swiper.css';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage } from '@ionic/vue';
+
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
+import '@ionic/vue/css/ionic-swiper.css';
 </script>
 ```
 
 From here, we need to provide these modules to Swiper by using the `modules` property on the `swiper` component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -164,25 +164,25 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
   </ion-page>
 </template>
 <script>
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage } from '@ionic/vue';
-
-  import 'swiper/css';
-  import 'swiper/css/autoplay';
-  import 'swiper/css/keyboard';
-  import 'swiper/css/pagination';
-  import 'swiper/css/scrollbar';
-  import 'swiper/css/zoom';
-  import '@ionic/vue/css/ionic-swiper.css';
-
-  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage } from '@ionic/vue';
+
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
+import '@ionic/vue/css/ionic-swiper.css';
+
+const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
 </script>
 ```
 
 Finally, we can turn these features on by using the appropriate properties:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -195,19 +195,19 @@ Finally, we can turn these features on by using the appropriate properties:
   </ion-page>
 </template>
 <script>
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage } from '@ionic/vue';
-
-  import 'swiper/css';
-  import 'swiper/css/autoplay';
-  import 'swiper/css/keyboard';
-  import 'swiper/css/pagination';
-  import 'swiper/css/scrollbar';
-  import 'swiper/css/zoom';
-  import '@ionic/vue/css/ionic-swiper.css';
-
-  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage } from '@ionic/vue';
+
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
+import '@ionic/vue/css/ionic-swiper.css';
+
+const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
 </script>
 ```
 
@@ -223,7 +223,7 @@ It is recommended to review the [properties](https://github.com/ionic-team/ionic
 
 We can install the `IonicSlides` module by importing it from `@ionic/vue` and passing it in as the last item in the `modules` array:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -236,19 +236,19 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
   </ion-page>
 </template>
 <script setup lang="ts">
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
-
-  import 'swiper/css';
-  import 'swiper/css/autoplay';
-  import 'swiper/css/keyboard';
-  import 'swiper/css/pagination';
-  import 'swiper/css/scrollbar';
-  import 'swiper/css/zoom';
-  import '@ionic/vue/css/ionic-swiper.css';
-
-  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides];
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
+import '@ionic/vue/css/ionic-swiper.css';
+
+const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides];
 </script>
 ```
 
@@ -262,7 +262,7 @@ Swiper options are provided as props directly on the `<swiper>` component rather
 
 Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set:
 
-```html
+```vue
 <template>
   <ion-slides :options="{ slidesPerView: 3, loop: true }">
     <ion-slide>Slide 1</ion-slide>
@@ -274,7 +274,7 @@ Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` opti
 
 To migrate, we would move these options out of the `options` object and onto the `<swiper>` component directly as properties:
 
-```html
+```vue
 <template>
   <swiper :slides-per-view="3" :loop="true">
     <swiper-slide>Slide 1</swiper-slide>
@@ -303,7 +303,7 @@ Since the `Swiper` component is not provided by Ionic Framework, event names wil
 
 Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 
-```html
+```vue
 <template>
   <ion-slides @ionSlideDidChange="onSlideChange">
     <ion-slide>Slide 1</ion-slide>
@@ -315,7 +315,7 @@ Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 
 To migrate, we would change the name of the event to `slideChange`:
 
-```html
+```vue
 <template>
   <swiper @slideChange="onSlideChange">
     <swiper-slide>Slide 1</swiper-slide>
@@ -356,18 +356,18 @@ Most methods have been removed in favor of accessing the `<swiper>` props direct
 
 Accessing these properties can be tricky as you want to access the properties on the Swiper instance itself, not your Vue component. To do this, we recommend getting a reference to the Swiper instance via the `@swiper` event handler:
 
-```html
+```vue
 <template>
   <swiper @swiper="setSwiperInstance"> ... </swiper>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
+import { ref } from 'vue';
 
-  const slides = ref();
-  const setSwiperInstance = (swiper: any) => {
-    slides.value = swiper;
-  };
+const slides = ref();
+const setSwiperInstance = (swiper: any) => {
+  slides.value = swiper;
+};
 </script>
 ```
 
@@ -393,7 +393,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper Vu
 
 If you are using effects such as Cube or Fade, you can install them just like we did with the other modules. In this example, we will use the fade effect. To start, we will import `EffectFade` from `swiper` and provide it in the `modules` array:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -406,20 +406,20 @@ If you are using effects such as Cube or Fade, you can install them just like we
   </ion-page>
 </template>
 <script>
-  import { EffectFade } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+import { EffectFade } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
-  import 'swiper/css';
-  import '@ionic/vue/css/ionic-swiper.css';
+import 'swiper/css';
+import '@ionic/vue/css/ionic-swiper.css';
 
-  const modules = [EffectFade, IonicSlides];
+const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
 Next, we need to import the stylesheet associated with the effect:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -432,21 +432,21 @@ Next, we need to import the stylesheet associated with the effect:
   </ion-page>
 </template>
 <script>
-  import { EffectFade } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+import { EffectFade } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
-  import 'swiper/css';
-  import 'swiper/css/effect-fade';
-  import '@ionic/vue/css/ionic-swiper.css';
+import 'swiper/css';
+import 'swiper/css/effect-fade';
+import '@ionic/vue/css/ionic-swiper.css';
 
-  const modules = [EffectFade, IonicSlides];
+const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
 After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -459,15 +459,15 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
   </ion-page>
 </template>
 <script>
-  import { EffectFade } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+import { EffectFade } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
-  import 'swiper/css';
-  import 'swiper/css/effect-fade';
-  import '@ionic/vue/css/ionic-swiper.css';
+import 'swiper/css';
+import 'swiper/css/effect-fade';
+import '@ionic/vue/css/ionic-swiper.css';
 
-  const modules = [EffectFade, IonicSlides];
+const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
diff --git a/docs/vue/troubleshooting.md b/docs/vue/troubleshooting.md
index 8ce3b22d68..6f728e01a4 100644
--- a/docs/vue/troubleshooting.md
+++ b/docs/vue/troubleshooting.md
@@ -26,13 +26,13 @@ Without importing the component, you will only get the underlying Web Component,
 
 To resolve this issue, you need to import the component from `@ionic/vue` and provide it to your Vue component:
 
-```html
+```vue
 <template>
   <ion-button>Hello World</ion-button>
 </template>
 
 <script setup lang="ts">
-  import { IonButton } from '@ionic/vue';
+import { IonButton } from '@ionic/vue';
 </script>
 ```
 
@@ -80,7 +80,7 @@ See the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more
 
 In order for page transitions to work correctly, each page must have an `ion-page` component at the root:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header>
@@ -93,7 +93,7 @@ In order for page transitions to work correctly, each page must have an `ion-pag
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
diff --git a/docs/vue/utility-functions.md b/docs/vue/utility-functions.md
index f84ec85165..6d17583067 100644
--- a/docs/vue/utility-functions.md
+++ b/docs/vue/utility-functions.md
@@ -137,7 +137,7 @@ See the [Keyboard Documentation](../developing/keyboard) for more information an
 
 Ionic Vue provides several lifecycle hooks for the `setup()` function to tap into the Ionic Framework page lifecycle.
 
-```js
+```vue
 <script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
 
diff --git a/docs/vue/virtual-scroll.md b/docs/vue/virtual-scroll.md
index 84ffece148..d574c3bb5e 100644
--- a/docs/vue/virtual-scroll.md
+++ b/docs/vue/virtual-scroll.md
@@ -69,7 +69,7 @@ This example will use the `RecycleScroller` component which only renders the vis
 
 The `RecycleScroller` component should be added inside of your `ion-content` component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -90,10 +90,10 @@ The `RecycleScroller` component should be added inside of your `ion-content` com
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
+import { ref } from 'vue';
+import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
 
-  const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
 </script>
 ```
 
@@ -113,7 +113,7 @@ Ionic Framework requires that features such as collapsible large titles, `ion-in
 
 For example:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content :scroll-y="false">
diff --git a/src/styles/components/_code.scss b/src/styles/components/_code.scss
index 27dc2a1b0d..fd9c32dfaa 100644
--- a/src/styles/components/_code.scss
+++ b/src/styles/components/_code.scss
@@ -121,7 +121,8 @@ pre[class*='language-'] {
 
 .token.tag.punctuation,
 .token.tag.class-name,
-.token.tag.punctuation + .token.tag:not(.attr-value):not([class*='language-']) {
+.token.tag.punctuation + .token.tag:not(.attr-value):not([class*='language-']),
+.token.tag.punctuation + .token.tag.language-vue:not(.attr-value) {
   color: #2b90ff;
 }
 
diff --git a/src/theme/prism-languages/prism-vue.ts b/src/theme/prism-languages/prism-vue.ts
index a63b281220..36e7703f15 100644
--- a/src/theme/prism-languages/prism-vue.ts
+++ b/src/theme/prism-languages/prism-vue.ts
@@ -21,19 +21,31 @@
   });
 
   Prism.languages.insertBefore('vue', 'comment', {
+    // Add support for <script> blocks within Vue files
     script: {
       pattern: /<script[\s\S]*?>[\s\S]*?<\/script>/i,
       inside: {
+        'script-tag': {
+          pattern: /<script[\s\S]*?>|<\/script>/i,
+          inside: Prism.languages.markup,
+          alias: 'tag',
+        },
         rest: Prism.languages.javascript,
       },
-      alias: 'language-javascript',
+      alias: 'language-vue',
     },
+    // Add support for <style> blocks within Vue files
     style: {
       pattern: /<style[\s\S]*?>[\s\S]*?<\/style>/i,
       inside: {
+        'style-tag': {
+          pattern: /<style[\s\S]*?>|<\/style>/i,
+          inside: Prism.languages.markup,
+          alias: 'tag',
+        },
         rest: Prism.languages.css,
       },
-      alias: 'language-css',
+      alias: 'language-vue',
     },
   });
 
diff --git a/versioned_docs/version-v7/vue/build-options.md b/versioned_docs/version-v7/vue/build-options.md
index 5a43eaf6fb..8d27698cfd 100644
--- a/versioned_docs/version-v7/vue/build-options.md
+++ b/versioned_docs/version-v7/vue/build-options.md
@@ -28,7 +28,7 @@ Also note that locally registered components are not available in subcomponents.
 
 Let's take a look at how local component registration works:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -38,8 +38,8 @@ Let's take a look at how local component registration works:
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonPage } from '@ionic/vue';
-  import SubComponent from '@/components/SubComponent.vue';
+import { IonContent, IonPage } from '@ionic/vue';
+import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
@@ -70,7 +70,7 @@ app.component('ion-page', IonPage);
 
 **MyComponent.vue**
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -80,7 +80,7 @@ app.component('ion-page', IonPage);
 </template>
 
 <script setup lang="ts">
-  import SubComponent from '@/components/SubComponent.vue';
+import SubComponent from '@/components/SubComponent.vue';
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/lifecycle.md b/versioned_docs/version-v7/vue/lifecycle.md
index f6c5fa5423..a1262c0033 100644
--- a/versioned_docs/version-v7/vue/lifecycle.md
+++ b/versioned_docs/version-v7/vue/lifecycle.md
@@ -21,7 +21,7 @@ These lifecycles are only called on components directly mapped by a router. This
 
 The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component:
 
-```tsx
+```vue
 <script setup lang="ts">
 import { IonPage } from '@ionic/vue';
 
@@ -47,7 +47,7 @@ const ionViewWillLeave = () => {
 
 These lifecycles can also be expressed using Vue 3's Composition API:
 
-```tsx
+```vue
 <script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
 
diff --git a/versioned_docs/version-v7/vue/navigation.md b/versioned_docs/version-v7/vue/navigation.md
index 24d9ea2d8d..b77a19ba7e 100644
--- a/versioned_docs/version-v7/vue/navigation.md
+++ b/versioned_docs/version-v7/vue/navigation.md
@@ -103,7 +103,7 @@ Say we start on the `home` route, and we want to add a button that takes us to t
 
 We can also programmatically navigate in our app by using the router API:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -113,10 +113,10 @@ We can also programmatically navigate in our app by using the router API:
 </template>
 
 <script setup lang="ts">
-  import { IonButton, IonContent, IonPage } from '@ionic/vue';
-  import { useRouter } from 'vue-router';
+import { IonButton, IonContent, IonPage } from '@ionic/vue';
+import { useRouter } from 'vue-router';
 
-  const router = useRouter();
+const router = useRouter();
 </script>
 ```
 
@@ -364,7 +364,7 @@ Here, our `tabs` path loads a `Tabs` component. We provide each tab as a route o
 
 Let's start by taking a look at our `Tabs` component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-tabs>
@@ -390,8 +390,8 @@ Let's start by taking a look at our `Tabs` component:
 </template>
 
 <script setup lang="ts">
-  import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
-  import { ellipse, square, triangle } from 'ionicons/icons';
+import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
+import { ellipse, square, triangle } from 'ionicons/icons';
 </script>
 ```
 
@@ -494,7 +494,7 @@ Nothing should be provided inside of `IonRouterOutlet` when setting it up in you
 
 The `IonPage` component wraps each view in an Ionic Vue app and allows page transitions and stack navigation to work properly. Each view that is navigated to using the router must include an `IonPage` component.
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header>
@@ -507,7 +507,7 @@ The `IonPage` component wraps each view in an Ionic Vue app and allows page tran
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
@@ -550,7 +550,7 @@ Notice that we have now added `:id` to the end of our `detail` path string. URL
 
 Let's look at how to use it in our component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header>
@@ -564,11 +564,11 @@ Let's look at how to use it in our component:
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { useRoute } from 'vue-router';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { useRoute } from 'vue-router';
 
-  const route = useRoute();
-  const { id } = route.params;
+const route = useRoute();
+const { id } = route.params;
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/performance.md b/versioned_docs/version-v7/vue/performance.md
index c767f2aa8b..b3206fd76e 100644
--- a/versioned_docs/version-v7/vue/performance.md
+++ b/versioned_docs/version-v7/vue/performance.md
@@ -11,7 +11,7 @@ When using `v-for` with Ionic components, we recommend using Vue's `key` attribu
 
 By using `key` you can provide a stable identity for each loop element so Vue can track insertions and deletions within the iterator. Below is an example of how to use `key`:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -23,14 +23,14 @@ By using `key` you can provide a stable identity for each loop element so Vue ca
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
-  import { ref } from 'vue';
-
-  const items = ref([
-    { id: 0, value: 'Item 0' },
-    { id: 1, value: 'Item 1' },
-    ...
-  ]);
+import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
+import { ref } from 'vue';
+
+const items = ref([
+  { id: 0, value: 'Item 0' },
+  { id: 1, value: 'Item 1' },
+  ...
+]);
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/quickstart.md b/versioned_docs/version-v7/vue/quickstart.md
index 8ff548436d..6f96596157 100644
--- a/versioned_docs/version-v7/vue/quickstart.md
+++ b/versioned_docs/version-v7/vue/quickstart.md
@@ -74,7 +74,7 @@ Let's walk through these files to understand the app's structure.
 
 The root of your app is defined in `App.vue`:
 
-```tsx
+```vue
 <template>
   <ion-app>
     <ion-router-outlet />
@@ -123,7 +123,7 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 The Home page component, defined in `views/HomePage.vue`, imports the Ionic components and defines the page template:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -153,7 +153,7 @@ The Home page component, defined in `views/HomePage.vue`, imports the Ionic comp
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 
 <!-- ...styles... -->
@@ -169,7 +169,7 @@ For detailed information about Ionic layout components, see the [Header](/docs/a
 
 You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) at the end of the `ion-content`:
 
-```html
+```vue
 <ion-content>
   <!-- existing content -->
 
@@ -179,9 +179,9 @@ You can enhance your Home page with more Ionic UI components. For example, add a
 
 Then, import the `IonButton` component in the `<script>` tag:
 
-```html
+```vue
 <script setup lang="ts">
-  import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
@@ -189,7 +189,7 @@ Then, import the `IonButton` component in the `<script>` tag:
 
 Create a new page at `views/NewPage.vue`:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header :translucent="true">
@@ -212,7 +212,7 @@ Create a new page at `views/NewPage.vue`:
 </template>
 
 <script setup lang="ts">
-  import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
@@ -255,7 +255,7 @@ const routes: Array<RouteRecordRaw> = [
 
 Once that is done, update the button in `views/HomePage.vue`:
 
-```tsx
+```vue
 <ion-button router-link="/new">Navigate</ion-button>
 ```
 
@@ -269,16 +269,16 @@ Ionic Vue comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You c
 
 Update the imports in `views/NewPage.vue` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
-```html
+```vue
 <script setup lang="ts">
-  import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-  import { heart, logoIonic } from 'ionicons/icons';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { heart, logoIonic } from 'ionicons/icons';
 </script>
 ```
 
 Then, include them inside of the `ion-content`:
 
-```tsx
+```vue
 <ion-icon :icon="heart"></ion-icon>
 <ion-icon :icon="logoIonic"></ion-icon>
 ```
@@ -293,7 +293,7 @@ Let's add a button that can scroll the content area to the bottom.
 
 Update `views/NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
 
-```html
+```vue
 <ion-content ref="content">
   <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
 
@@ -306,29 +306,29 @@ Update `views/NewPage.vue` to include a ref on `ion-content` and a button and so
 
 In the script section, add the new component imports and define the `scrollToBottom` function:
 
-```html
+```vue
 <script setup lang="ts">
-  import {
-    IonBackButton,
-    IonButtons,
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonIcon,
-    IonItem,
-    IonLabel,
-    IonPage,
-    IonTitle,
-    IonToolbar,
-  } from '@ionic/vue';
-  import { heart, logoIonic } from 'ionicons/icons';
-  import { ref } from 'vue';
-
-  const content = ref();
-
-  const scrollToBottom = () => {
-    content.value.$el.scrollToBottom(300);
-  };
+import {
+  IonBackButton,
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/vue';
+import { heart, logoIonic } from 'ionicons/icons';
+import { ref } from 'vue';
+
+const content = ref();
+
+const scrollToBottom = () => {
+  content.value.$el.scrollToBottom(300);
+};
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/slides.md b/versioned_docs/version-v7/vue/slides.md
index a39a045bde..e55c22a097 100644
--- a/versioned_docs/version-v7/vue/slides.md
+++ b/versioned_docs/version-v7/vue/slides.md
@@ -10,7 +10,7 @@ title: Migrating From ion-slides to Swiper.js
   />
 </head>
 
-:::caution Looking for `ion-slides`?
+:::warning Looking for `ion-slides`?
 `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 :::
 
@@ -48,10 +48,10 @@ Next, we need to import the base Swiper styles. We are also going to import the
 
 We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
 
-```html
+```vue
 <script setup lang="ts">
-  import 'swiper/css';
-  import '@ionic/vue/css/ionic-swiper.css';
+import 'swiper/css';
+import '@ionic/vue/css/ionic-swiper.css';
 </script>
 ```
 
@@ -92,7 +92,7 @@ Swiper exports two components: `Swiper` and `SwiperSlide`. The `Swiper` componen
 
 These components are imported from `swiper/vue` and provided to your Vue component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -106,11 +106,11 @@ These components are imported from `swiper/vue` and provided to your Vue compone
 </template>
 
 <script setup lang="ts">
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage } from '@ionic/vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage } from '@ionic/vue';
 
-  import 'swiper/css';
-  import '@ionic/vue/css/ionic-swiper.css';
+import 'swiper/css';
+import '@ionic/vue/css/ionic-swiper.css';
 </script>
 ```
 
@@ -122,7 +122,7 @@ By default, Swiper for Vue does not import any additional modules. To use module
 
 To begin, we need to import the modules and their corresponding CSS files from the `swiper` package:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -135,23 +135,23 @@ To begin, we need to import the modules and their corresponding CSS files from t
   </ion-page>
 </template>
 <script setup lang="ts">
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage } from '@ionic/vue';
-
-  import 'swiper/css';
-  import 'swiper/css/autoplay';
-  import 'swiper/css/keyboard';
-  import 'swiper/css/pagination';
-  import 'swiper/css/scrollbar';
-  import 'swiper/css/zoom';
-  import '@ionic/vue/css/ionic-swiper.css';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage } from '@ionic/vue';
+
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
+import '@ionic/vue/css/ionic-swiper.css';
 </script>
 ```
 
 From here, we need to provide these modules to Swiper by using the `modules` property on the `swiper` component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -164,25 +164,25 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
   </ion-page>
 </template>
 <script>
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage } from '@ionic/vue';
-
-  import 'swiper/css';
-  import 'swiper/css/autoplay';
-  import 'swiper/css/keyboard';
-  import 'swiper/css/pagination';
-  import 'swiper/css/scrollbar';
-  import 'swiper/css/zoom';
-  import '@ionic/vue/css/ionic-swiper.css';
-
-  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage } from '@ionic/vue';
+
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
+import '@ionic/vue/css/ionic-swiper.css';
+
+const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
 </script>
 ```
 
 Finally, we can turn these features on by using the appropriate properties:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -195,19 +195,19 @@ Finally, we can turn these features on by using the appropriate properties:
   </ion-page>
 </template>
 <script>
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage } from '@ionic/vue';
-
-  import 'swiper/css';
-  import 'swiper/css/autoplay';
-  import 'swiper/css/keyboard';
-  import 'swiper/css/pagination';
-  import 'swiper/css/scrollbar';
-  import 'swiper/css/zoom';
-  import '@ionic/vue/css/ionic-swiper.css';
-
-  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage } from '@ionic/vue';
+
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
+import '@ionic/vue/css/ionic-swiper.css';
+
+const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom];
 </script>
 ```
 
@@ -223,7 +223,7 @@ It is recommended to review the [properties](https://github.com/ionic-team/ionic
 
 We can install the `IonicSlides` module by importing it from `@ionic/vue` and passing it in as the last item in the `modules` array:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -235,20 +235,20 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
     </ion-content>
   </ion-page>
 </template>
-<script>
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
-
-  import 'swiper/css';
-  import 'swiper/css/autoplay';
-  import 'swiper/css/keyboard';
-  import 'swiper/css/pagination';
-  import 'swiper/css/scrollbar';
-  import 'swiper/css/zoom';
-  import '@ionic/vue/css/ionic-swiper.css';
-
-  const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides];
+<script setup lang="ts">
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
+import '@ionic/vue/css/ionic-swiper.css';
+
+const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides];
 </script>
 ```
 
@@ -262,7 +262,7 @@ Swiper options are provided as props directly on the `<swiper>` component rather
 
 Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set:
 
-```html
+```vue
 <template>
   <ion-slides :options="{ slidesPerView: 3, loop: true }">
     <ion-slide>Slide 1</ion-slide>
@@ -274,7 +274,7 @@ Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` opti
 
 To migrate, we would move these options out of the `options` object and onto the `<swiper>` component directly as properties:
 
-```html
+```vue
 <template>
   <swiper :slides-per-view="3" :loop="true">
     <swiper-slide>Slide 1</swiper-slide>
@@ -303,7 +303,7 @@ Since the `Swiper` component is not provided by Ionic Framework, event names wil
 
 Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 
-```html
+```vue
 <template>
   <ion-slides @ionSlideDidChange="onSlideChange">
     <ion-slide>Slide 1</ion-slide>
@@ -315,7 +315,7 @@ Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
 
 To migrate, we would change the name of the event to `slideChange`:
 
-```html
+```vue
 <template>
   <swiper @slideChange="onSlideChange">
     <swiper-slide>Slide 1</swiper-slide>
@@ -356,18 +356,18 @@ Most methods have been removed in favor of accessing the `<swiper>` props direct
 
 Accessing these properties can be tricky as you want to access the properties on the Swiper instance itself, not your Vue component. To do this, we recommend getting a reference to the Swiper instance via the `@swiper` event handler:
 
-```html
+```vue
 <template>
   <swiper @swiper="setSwiperInstance"> ... </swiper>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
+import { ref } from 'vue';
 
-  const slides = ref();
-  const setSwiperInstance = (swiper: any) => {
-    slides.value = swiper;
-  };
+const slides = ref();
+const setSwiperInstance = (swiper: any) => {
+  slides.value = swiper;
+};
 </script>
 ```
 
@@ -393,7 +393,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper Vu
 
 If you are using effects such as Cube or Fade, you can install them just like we did with the other modules. In this example, we will use the fade effect. To start, we will import `EffectFade` from `swiper` and provide it in the `modules` array:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -406,20 +406,20 @@ If you are using effects such as Cube or Fade, you can install them just like we
   </ion-page>
 </template>
 <script>
-  import { EffectFade } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+import { EffectFade } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
-  import 'swiper/css';
-  import '@ionic/vue/css/ionic-swiper.css';
+import 'swiper/css';
+import '@ionic/vue/css/ionic-swiper.css';
 
-  const modules = [EffectFade, IonicSlides];
+const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
 Next, we need to import the stylesheet associated with the effect:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -432,21 +432,21 @@ Next, we need to import the stylesheet associated with the effect:
   </ion-page>
 </template>
 <script>
-  import { EffectFade } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+import { EffectFade } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
-  import 'swiper/css';
-  import 'swiper/css/effect-fade';
-  import '@ionic/vue/css/ionic-swiper.css';
+import 'swiper/css';
+import 'swiper/css/effect-fade';
+import '@ionic/vue/css/ionic-swiper.css';
 
-  const modules = [EffectFade, IonicSlides];
+const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
 After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -459,15 +459,15 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
   </ion-page>
 </template>
 <script>
-  import { EffectFade } from 'swiper/modules';
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
+import { EffectFade } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
-  import 'swiper/css';
-  import 'swiper/css/effect-fade';
-  import '@ionic/vue/css/ionic-swiper.css';
+import 'swiper/css';
+import 'swiper/css/effect-fade';
+import '@ionic/vue/css/ionic-swiper.css';
 
-  const modules = [EffectFade, IonicSlides];
+const modules = [EffectFade, IonicSlides];
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/troubleshooting.md b/versioned_docs/version-v7/vue/troubleshooting.md
index 8ce3b22d68..6f728e01a4 100644
--- a/versioned_docs/version-v7/vue/troubleshooting.md
+++ b/versioned_docs/version-v7/vue/troubleshooting.md
@@ -26,13 +26,13 @@ Without importing the component, you will only get the underlying Web Component,
 
 To resolve this issue, you need to import the component from `@ionic/vue` and provide it to your Vue component:
 
-```html
+```vue
 <template>
   <ion-button>Hello World</ion-button>
 </template>
 
 <script setup lang="ts">
-  import { IonButton } from '@ionic/vue';
+import { IonButton } from '@ionic/vue';
 </script>
 ```
 
@@ -80,7 +80,7 @@ See the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more
 
 In order for page transitions to work correctly, each page must have an `ion-page` component at the root:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-header>
@@ -93,7 +93,7 @@ In order for page transitions to work correctly, each page must have an `ion-pag
 </template>
 
 <script setup lang="ts">
-  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 </script>
 ```
 
diff --git a/versioned_docs/version-v7/vue/utility-functions.md b/versioned_docs/version-v7/vue/utility-functions.md
index f84ec85165..6d17583067 100644
--- a/versioned_docs/version-v7/vue/utility-functions.md
+++ b/versioned_docs/version-v7/vue/utility-functions.md
@@ -137,7 +137,7 @@ See the [Keyboard Documentation](../developing/keyboard) for more information an
 
 Ionic Vue provides several lifecycle hooks for the `setup()` function to tap into the Ionic Framework page lifecycle.
 
-```js
+```vue
 <script setup lang="ts">
 import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
 
diff --git a/versioned_docs/version-v7/vue/virtual-scroll.md b/versioned_docs/version-v7/vue/virtual-scroll.md
index 21ebb70978..d574c3bb5e 100644
--- a/versioned_docs/version-v7/vue/virtual-scroll.md
+++ b/versioned_docs/version-v7/vue/virtual-scroll.md
@@ -1,6 +1,6 @@
 # Virtual Scroll
 
-:::caution Looking for `ion-virtual-scroll`?
+:::warning Looking for `ion-virtual-scroll`?
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using a Vue library to accomplish this. We outline one approach using `vue-virtual-scroller` below.
 
@@ -69,7 +69,7 @@ This example will use the `RecycleScroller` component which only renders the vis
 
 The `RecycleScroller` component should be added inside of your `ion-content` component:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content>
@@ -90,10 +90,10 @@ The `RecycleScroller` component should be added inside of your `ion-content` com
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
+import { ref } from 'vue';
+import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';
 
-  const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
 </script>
 ```
 
@@ -113,7 +113,7 @@ Ionic Framework requires that features such as collapsible large titles, `ion-in
 
 For example:
 
-```html
+```vue
 <template>
   <ion-page>
     <ion-content :scroll-y="false">