feat(vue): add code highlighting (#4311)

Author: thetaPC

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>
 ```
 

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';
 

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>
 ```
 

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>
 ```
 

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,17 +179,17 @@ 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>
 ```
 
 ## Add a New Page
 
 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>
 ```