docs: use vue-html for template examples (#2056)

Author: skirtles-code

packages/docs/guide/advanced/transitions.md

@@ -7,7 +7,7 @@
 
 In order to use transitions on your route components and animate navigations, you need to use the [`<RouterView>` slot](./router-view-slot):
 
-```html
+```vue-html
 <router-view v-slot="{ Component }">
   <transition name="fade">
     <component :is="Component" />
@@ -36,7 +36,7 @@ const routes = [
 ]
 ```
 
-```html
+```vue-html
 <router-view v-slot="{ Component, route }">
   <!-- Use any custom transition and  to `fade` -->
   <transition :name="route.meta.transition || 'fade'">
@@ -49,7 +49,7 @@ const routes = [
 
 It is also possible to determine the transition to use dynamically based on the relationship between the target route and current route. Using a very similar snippet to the one just before:
 
-```html
+```vue-html
 <!-- use a dynamic transition name -->
 <router-view v-slot="{ Component, route }">
   <transition :name="route.meta.transition">
@@ -72,7 +72,7 @@ router.afterEach((to, from) => {
 
 Vue might automatically reuse components that look alike, avoiding any transition. Fortunately, it is possible [to add a `key` attribute](https://vuejs.org/api/built-in-special-attributes.html#key) to force transitions. This also allows you to trigger transitions while staying on the same route with different params:
 
-```vue
+```vue-html
 <router-view v-slot="{ Component, route }">
   <transition name="fade">
     <component :is="Component" :key="route.path" />

packages/docs/guide/essentials/named-routes.md

@@ -24,7 +24,7 @@ const routes = [
 
 To link to a named route, you can pass an object to the `router-link` component's `to` prop:
 
-```html
+```vue-html
 <router-link :to="{ name: 'user', params: { username: 'erina' }}">
   User
 </router-link>

packages/docs/guide/essentials/named-views.md

@@ -7,7 +7,7 @@
 
 Sometimes you need to display multiple views at the same time instead of nesting them, e.g. creating a layout with a `sidebar` view and a `main` view. This is where named views come in handy. Instead of having one single outlet in your view, you can have multiple and give each of them a name. A `router-view` without a name will be given `default` as its name.
 
-```html
+```vue-html
 <router-view class="view left-sidebar" name="LeftSidebar"></router-view>
 <router-view class="view main-content"></router-view>
 <router-view class="view right-sidebar" name="RightSidebar"></router-view>
@@ -61,7 +61,7 @@ It is possible to create complex layouts using named views with nested views. Wh
 
 The `<template>` section for `UserSettings` component in the above layout would look something like this:
 
-```html
+```vue-html
 <!-- UserSettings.vue -->
 <div>
   <h1>User Settings</h1>

packages/docs/guide/migration/index.md

@@ -154,7 +154,7 @@ The object returned in `scrollBehavior` is now similar to [`ScrollToOptions`](ht
 
 `transition` and `keep-alive` must now be used **inside** of `RouterView` via the `v-slot` API:
 
-```vue
+```vue-html
 <router-view v-slot="{ Component }">
   <transition>
     <keep-alive>
@@ -170,7 +170,7 @@ The object returned in `scrollBehavior` is now similar to [`ScrollToOptions`](ht
 
 The `append` prop has been removed from `<router-link>`. You can manually concatenate the value to an existing `path` instead:
 
-```html
+```vue-html
 replace
 <router-link to="child-route" append>to relative child</router-link>
 with
@@ -192,7 +192,7 @@ app.config.globalProperties.append = (path, pathToAppend) =>
 
 Both `event`, and `tag` props have been removed from `<router-link>`. You can use the [`v-slot` API](/guide/advanced/composition-api#uselink) to fully customize `<router-link>`:
 
-```html
+```vue-html
 replace
 <router-link to="/about" tag="span" event="dblclick">About Us</router-link>
 with
@@ -276,15 +276,15 @@ You can also extend the TypeScript definition of the `Router` interface to add t
 
 Before you could directly pass a template to be rendered by a route components' `<slot>` by nesting it under a `<router-view>` component:
 
-```html
+```vue-html
 <router-view>
   <p>In Vue Router 3, I render inside the route component</p>
 </router-view>
 ```
 
 Because of the introduction of the `v-slot` api for `<router-view>`, you must pass it to the `<component>` using the `v-slot` API:
 
-```html
+```vue-html
 <router-view v-slot="{ Component }">
   <component :is="Component">
     <p>In Vue Router 3, I render inside the route component</p>

packages/docs/zh/guide/advanced/transitions.md

@@ -7,7 +7,7 @@
 
 想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API](/guide/advanced/composition-api#uselink)：
 
-```html
+```vue-html
 <router-view v-slot="{ Component }">
   <transition name="fade">
     <component :is="Component" />
@@ -36,7 +36,7 @@ const routes = [
 ]
 ```
 
-```html
+```vue-html
 <router-view v-slot="{ Component, route }">
   <!-- 使用任何自定义过渡和回退到 `fade` -->
   <transition :name="route.meta.transition || 'fade'">
@@ -49,7 +49,7 @@ const routes = [
 
 也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。使用和刚才非常相似的片段：
 
-```html
+```vue-html
 <!-- 使用动态过渡名称 -->
 <router-view v-slot="{ Component, route }">
   <transition :name="route.meta.transition">
@@ -72,7 +72,7 @@ router.afterEach((to, from) => {
 
 Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡。幸运的是，可以[添加一个 `key` 属性](https://cn.vuejs.org/api/built-in-special-attributes.html#key)来强制过渡。这也允许你在相同路由上使用不同的参数触发过渡：
 
-```vue
+```vue-html
 <router-view v-slot="{ Component, route }">
   <transition name="fade">
     <component :is="Component" :key="route.path" />

packages/docs/zh/guide/essentials/named-routes.md

@@ -24,7 +24,7 @@ const routes = [
 
 要链接到一个命名的路由，可以向 `router-link` 组件的 `to` 属性传递一个对象：
 
-```html
+```vue-html
 <router-link :to="{ name: 'user', params: { username: 'erina' }}">
   User
 </router-link>

packages/docs/zh/guide/essentials/named-views.md

@@ -7,7 +7,7 @@
 
 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 `sidebar` (侧导航) 和 `main` (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 `router-view` 没有设置名字，那么默认为 `default`。
 
-```html
+```vue-html
 <router-view class="view left-sidebar" name="LeftSidebar"></router-view>
 <router-view class="view main-content"></router-view>
 <router-view class="view right-sidebar" name="RightSidebar"></router-view>
@@ -59,7 +59,7 @@ const router = createRouter({
 
 `UserSettings` 组件的 `<template>` 部分应该是类似下面的这段代码:
 
-```html
+```vue-html
 <!-- UserSettings.vue -->
 <div>
   <h1>User Settings</h1>

packages/docs/zh/guide/migration/index.md

@@ -141,7 +141,7 @@ try {
 
 `transition` 和 `keep-alive` 现在必须通过 `v-slot` API 在 `RouterView` **内部**使用：
 
-```vue
+```vue-html
 <router-view v-slot="{ Component }">
   <transition>
     <keep-alive>
@@ -157,7 +157,7 @@ try {
 
 `<router-link>` 中的 `append` 属性已被删除。你可以手动将值设置到现有的 `path` 中：
 
-```html
+```vue-html
 将
 <router-link to="child-route" append>to relative child</router-link>
 替换成
@@ -179,7 +179,7 @@ app.config.globalProperties.append = (path, pathToAppend) =>
 
 `<router-link>` 中的 `event` 和 `tag` 属性都已被删除。你可以使用 [`v-slot` API](/zh/guide/advanced/composition-api#uselink) 来完全定制 `<router-link>`：
 
-```html
+```vue-html
 将
 <router-link to="/about" tag="span" event="dblclick">About Us</router-link>
 替换成
@@ -254,15 +254,15 @@ router.app = app
 
 之前你可以直接传递一个模板，通过嵌套在 `<router-view>` 组件下，由路由组件的 `<slot>` 来渲染：
 
-```html
+```vue-html
 <router-view>
   <p>In Vue Router 3, I render inside the route component</p>
 </router-view>
 ```
 
 由于 `<router-view>` 引入了 `v-slot` API，你必须使用 `v-slot` API 将其传递给 `<component>`：
 
-```html
+```vue-html
 <router-view v-slot="{ Component }">
   <component :is="Component">
     <p>In Vue Router 3, I render inside the route component</p>