diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md
index f1e9677015..c2a04391a9 100644
--- a/src/api/sfc-script-setup.md
+++ b/src/api/sfc-script-setup.md
@@ -298,16 +298,20 @@ function inc() {
 :::warning
 If you have a `default` value for `defineModel` prop and you don't provide any value for this prop from the parent component, it can cause a de-synchronization between parent and child components. In the example below, the parent's `myRef` is undefined, but the child's `model` is 1:
 
-```js
-// child component:
+```vue [Child.vue]
+<script setup>
 const model = defineModel({ default: 1 })
+</script>
+```
 
-// parent component:
+```vue [Parent.vue]
+<script setup>
 const myRef = ref()
-```
+</script>
 
-```html
-<Child v-model="myRef"></Child>
+<template>
+  <Child v-model="myRef"></Child>
+</template>
 ```
 
 :::
diff --git a/src/guide/built-ins/transition.md b/src/guide/built-ins/transition.md
index 9462144296..0d46248c2e 100644
--- a/src/guide/built-ins/transition.md
+++ b/src/guide/built-ins/transition.md
@@ -469,8 +469,7 @@ Here's a demo using the [GSAP library](https://gsap.com/) to perform the animati
 
 Transitions can be reused through Vue's component system. To create a reusable transition, we can create a component that wraps the `<Transition>` component and passes down the slot content:
 
-```vue{5}
-<!-- MyTransition.vue -->
+```vue{6} [MyTransition.vue]
 <script>
 // JavaScript hooks logic...
 </script>
diff --git a/src/guide/components/provide-inject.md b/src/guide/components/provide-inject.md
index 6c0addc7c2..3a5329c7e5 100644
--- a/src/guide/components/provide-inject.md
+++ b/src/guide/components/provide-inject.md
@@ -297,7 +297,7 @@ provide('read-only-count', readonly(count))
 
 In order to make injections reactively linked to the provider, we need to provide a computed property using the [computed()](/api/reactivity-core#computed) function:
 
-```js{10}
+```js{12}
 import { computed } from 'vue'
 
 export default {
@@ -327,8 +327,7 @@ So far, we have been using string injection keys in the examples. If you are wor
 
 It's recommended to export the Symbols in a dedicated file:
 
-```js
-// keys.js
+```js [keys.js]
 export const myInjectionKey = Symbol()
 ```
 
diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md
index 2fb1341359..e1248c18f5 100644
--- a/src/guide/components/v-model.md
+++ b/src/guide/components/v-model.md
@@ -12,8 +12,7 @@
 
 Starting in Vue 3.4, the recommended approach to achieve this is using the [`defineModel()`](/api/sfc-script-setup#definemodel) macro:
 
-```vue
-<!-- Child.vue -->
+```vue [Child.vue]
 <script setup>
 const model = defineModel()
 
@@ -30,8 +29,7 @@ function update() {
 
 The parent can then bind a value with `v-model`:
 
-```vue-html
-<!-- Parent.vue -->
+```vue-html [Parent.vue]
 <Child v-model="countModel" />
 ```
 
@@ -63,8 +61,7 @@ const model = defineModel()
 
 This is how you would implement the same child component shown above prior to 3.4:
 
-```vue
-<!-- Child.vue -->
+```vue [Child.vue]
 <script setup>
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
@@ -80,8 +77,7 @@ const emit = defineEmits(['update:modelValue'])
 
 Then, `v-model="foo"` in the parent component will be compiled to:
 
-```vue-html
-<!-- Parent.vue -->
+```vue-html [Parent.vue]
 <Child
   :modelValue="foo"
   @update:modelValue="$event => (foo = $event)"
@@ -103,20 +99,20 @@ const model = defineModel({ default: 0 })
 :::warning
 If you have a `default` value for `defineModel` prop and you don't provide any value for this prop from the parent component, it can cause a de-synchronization between parent and child components. In the example below, the parent's `myRef` is undefined, but the child's `model` is 1:
 
-**Child component:**
-
-```js
+```vue [Child.vue]
+<script setup>
 const model = defineModel({ default: 1 })
+</script>
 ```
 
-**Parent component:**
-
-```js
+```vue [Parent.vue]
+<script setup>
 const myRef = ref()
-```
+</script>
 
-```html
-<Child v-model="myRef"></Child>
+<template>
+  <Child v-model="myRef"></Child>
+</template>
 ```
 
 :::
@@ -156,8 +152,7 @@ For this to actually work though, the `<CustomInput>` component must do two thin
 
 Here's that in action:
 
-```vue
-<!-- CustomInput.vue -->
+```vue [CustomInput.vue]
 <script>
 export default {
   props: ['modelValue'],
@@ -183,8 +178,7 @@ Now `v-model` should work perfectly with this component:
 
 Another way of implementing `v-model` within this component is to use a writable `computed` property with both a getter and a setter. The `get` method should return the `modelValue` property and the `set` method should emit the corresponding event:
 
-```vue
-<!-- CustomInput.vue -->
+```vue [CustomInput.vue]
 <script>
 export default {
   props: ['modelValue'],
@@ -221,8 +215,7 @@ export default {
 
 In the child component, we can support the corresponding argument by passing a string to `defineModel()` as its first argument:
 
-```vue
-<!-- MyComponent.vue -->
+```vue [MyComponent.vue]
 <script setup>
 const title = defineModel('title')
 </script>
@@ -243,8 +236,7 @@ const title = defineModel('title', { required: true })
 <details>
 <summary>Pre 3.4 Usage</summary>
 
-```vue
-<!-- MyComponent.vue -->
+```vue [MyComponent.vue]
 <script setup>
 defineProps({
   title: {
@@ -271,8 +263,7 @@ defineEmits(['update:title'])
 
 In this case, instead of the default `modelValue` prop and `update:modelValue` event, the child component should expect a `title` prop and emit an `update:title` event to update the parent value:
 
-```vue
-<!-- MyComponent.vue -->
+```vue [MyComponent.vue]
 <script>
 export default {
   props: ['title'],
@@ -412,7 +403,7 @@ console.log(modifiers) // { capitalize: true }
 
 To conditionally adjust how the value should be read / written based on modifiers, we can pass `get` and `set` options to `defineModel()`. These two options receive the value on get / set of the model ref and should return a transformed value. This is how we can use the `set` option to implement the `capitalize` modifier:
 
-```vue{6-8}
+```vue{4-6}
 <script setup>
 const [model, modifiers] = defineModel({
   set(value) {
@@ -577,10 +568,10 @@ console.log(lastNameModifiers) // { uppercase: true }
 ```vue{5,6,10,11}
 <script setup>
 const props = defineProps({
-firstName: String,
-lastName: String,
-firstNameModifiers: { default: () => ({}) },
-lastNameModifiers: { default: () => ({}) }
+  firstName: String,
+  lastName: String,
+  firstNameModifiers: { default: () => ({}) },
+  lastNameModifiers: { default: () => ({}) }
 })
 defineEmits(['update:firstName', 'update:lastName'])
 
diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md
index 3bc43e557d..cec4114e5b 100644
--- a/src/guide/essentials/component-basics.md
+++ b/src/guide/essentials/component-basics.md
@@ -188,8 +188,7 @@ Props are custom attributes you can register on a component. To pass a title to
 
 <div class="options-api">
 
-```vue
-<!-- BlogPost.vue -->
+```vue [BlogPost.vue]
 <script>
 export default {
   props: ['title']
@@ -206,8 +205,7 @@ When a value is passed to a prop attribute, it becomes a property on that compon
 </div>
 <div class="composition-api">
 
-```vue
-<!-- BlogPost.vue -->
+```vue [BlogPost.vue]
 <script setup>
 defineProps(['title'])
 </script>
@@ -352,8 +350,8 @@ Which can be used in the template to control the font size of all blog posts:
 
 Now let's add a button to the `<BlogPost>` component's template:
 
-```vue{5}
-<!-- BlogPost.vue, omitting <script> -->
+```vue{5} [BlogPost.vue]
+<!-- omitting <script> -->
 <template>
   <div class="blog-post">
     <h4>{{ title }}</h4>
@@ -373,8 +371,8 @@ The button doesn't do anything yet - we want clicking the button to communicate
 
 Then the child component can emit an event on itself by calling the built-in [**`$emit`** method](/api/component-instance#emit), passing the name of the event:
 
-```vue{5}
-<!-- BlogPost.vue, omitting <script> -->
+```vue{5} [BlogPost.vue]
+<!-- omitting <script> -->
 <template>
   <div class="blog-post">
     <h4>{{ title }}</h4>
@@ -400,8 +398,7 @@ We can optionally declare emitted events using the <span class="options-api">[`e
 
 <div class="options-api">
 
-```vue{5}
-<!-- BlogPost.vue -->
+```vue{4} [BlogPost.vue]
 <script>
 export default {
   props: ['title'],
@@ -413,8 +410,7 @@ export default {
 </div>
 <div class="composition-api">
 
-```vue{4}
-<!-- BlogPost.vue -->
+```vue{3} [BlogPost.vue]
 <script setup>
 defineProps(['title'])
 defineEmits(['enlarge-text'])
@@ -472,8 +468,7 @@ Something bad happened.
 
 This can be achieved using Vue's custom `<slot>` element:
 
-```vue{5}
-<!-- AlertBox.vue -->
+```vue{4} [AlertBox.vue]
 <template>
   <div class="alert-box">
     <strong>This is an Error for Demo Purposes</strong>
diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md
index 3c594ca15f..6b30885b35 100644
--- a/src/guide/extras/web-components.md
+++ b/src/guide/extras/web-components.md
@@ -43,8 +43,7 @@ export default {
 
 #### Example Vue CLI Config {#example-vue-cli-config}
 
-```js
-// vue.config.js
+```js [vue.config.js]
 module.exports = {
   chainWebpack: (config) => {
     config.module
@@ -218,8 +217,7 @@ If the custom elements will be used in an application that is also using Vue, yo
 
 It is recommended to export the individual element constructors to give your users the flexibility to import them on-demand and register them with desired tag names. You can also export a convenience function to automatically register all elements. Here's an example entry point of a Vue custom element library:
 
-```js
-// elements.js
+```js [elements.js]
 
 import { defineCustomElement } from 'vue'
 import Foo from './MyFoo.ce.vue'
@@ -311,9 +309,7 @@ This approach is one possible way to do it, but it may vary depending on the fra
 
 Suppose we have a custom element with some JS properties and events defined, and it is shipped in a library called `some-lib`:
 
-```ts
-// file: some-lib/src/SomeElement.ts
-
+```ts [some-lib/src/SomeElement.ts]
 // Define a class with typed JS properties.
 export class SomeElement extends HTMLElement {
   foo: number = 123
@@ -351,9 +347,7 @@ The implementation details have been omitted, but the important part is that we
 
 Let's create a type helper for easily registering custom element type definitions in Vue:
 
-```ts
-// file: some-lib/src/DefineCustomElement.ts
-
+```ts [some-lib/src/DefineCustomElement.ts]
 // We can re-use this type helper per each element we need to define.
 type DefineCustomElement<
   ElementType extends HTMLElement,
@@ -394,9 +388,7 @@ We marked `$props` and `$emit` as deprecated so that when we get a `ref` to a cu
 
 Using the type helper we can now select the JS properties that should be exposed for type checking in Vue templates:
 
-```ts
-// file: some-lib/src/SomeElement.vue.ts
-
+```ts [some-lib/src/SomeElement.vue.ts]
 import {
   SomeElement,
   SomeElementAttributes,
@@ -419,7 +411,7 @@ declare module 'vue' {
 
 Suppose that `some-lib` builds its source TypeScript files into a `dist/` folder. A user of `some-lib` can then import `SomeElement` and use it in a Vue SFC like so:
 
-```vue
+```vue [SomeElementImpl.vue]
 <script setup lang="ts">
 // This will create and register the element with the browser.
 import 'some-lib/dist/SomeElement.js'
@@ -465,7 +457,7 @@ onMounted(() => {
 
 If an element does not have type definitions, the types of the properties and events can be defined in a more manual fashion:
 
-```vue
+```vue [SomeElementImpl.vue]
 <script setup lang="ts">
 // Suppose that `some-lib` is plain JS without type definitions, and TypeScript
 // cannot infer the types:
diff --git a/src/guide/reusability/composables.md b/src/guide/reusability/composables.md
index 3ee3a06846..09155f8465 100644
--- a/src/guide/reusability/composables.md
+++ b/src/guide/reusability/composables.md
@@ -21,7 +21,7 @@ By contrast, stateful logic involves managing state that changes over time. A si
 
 If we were to implement the mouse tracking functionality using the Composition API directly inside a component, it would look like this:
 
-```vue
+```vue [MouseComponent.vue]
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 
@@ -42,8 +42,7 @@ onUnmounted(() => window.removeEventListener('mousemove', update))
 
 But what if we want to reuse the same logic in multiple components? We can extract the logic into an external file, as a composable function:
 
-```js
-// mouse.js
+```js [mouse.js]
 import { ref, onMounted, onUnmounted } from 'vue'
 
 // by convention, composable function names start with "use"
@@ -70,7 +69,7 @@ export function useMouse() {
 
 And this is how it can be used in components:
 
-```vue
+```vue [MouseComponent.vue]
 <script setup>
 import { useMouse } from './mouse.js'
 
@@ -92,8 +91,7 @@ The cooler part about composables though, is that you can also nest them: one co
 
 For example, we can extract the logic of adding and removing a DOM event listener into its own composable:
 
-```js
-// event.js
+```js [event.js]
 import { onMounted, onUnmounted } from 'vue'
 
 export function useEventListener(target, event, callback) {
@@ -106,8 +104,7 @@ export function useEventListener(target, event, callback) {
 
 And now our `useMouse()` composable can be simplified to:
 
-```js{3,9-12}
-// mouse.js
+```js{2,8-11} [mouse.js]
 import { ref } from 'vue'
 import { useEventListener } from './event'
 
@@ -157,8 +154,7 @@ fetch('...')
 
 It would be tedious to have to repeat this pattern in every component that needs to fetch data. Let's extract it into a composable:
 
-```js
-// fetch.js
+```js [fetch.js]
 import { ref } from 'vue'
 
 export function useFetch(url) {
@@ -208,8 +204,7 @@ const { data, error } = useFetch(() => `/posts/${props.id}`)
 
 We can refactor our existing implementation with the [`watchEffect()`](/api/reactivity-core.html#watcheffect) and [`toValue()`](/api/reactivity-utilities.html#tovalue) APIs:
 
-```js{8,13}
-// fetch.js
+```js{7,12} [fetch.js]
 import { ref, watchEffect, toValue } from 'vue'
 
 export function useFetch(url) {
diff --git a/src/guide/reusability/plugins.md b/src/guide/reusability/plugins.md
index 18278560fe..4b1a7426cf 100644
--- a/src/guide/reusability/plugins.md
+++ b/src/guide/reusability/plugins.md
@@ -56,8 +56,7 @@ We want to create a translation function. This function will receive a dot-delim
 
 Since this function should be globally available in all templates, we will make it so by attaching it to `app.config.globalProperties` in our plugin:
 
-```js{4-11}
-// plugins/i18n.js
+```js{3-10} [plugins/i18n.js]
 export default {
   install: (app, options) => {
     // inject a globally available $translate() method
@@ -98,7 +97,7 @@ Use global properties scarcely, since it can quickly become confusing if too man
 
 Plugins also allow us to use `provide` to give plugin users access to a function or attribute. For example, we can allow the application to have access to the `options` parameter to be able to use the translations object.
 
-```js{10} [plugins/i18n.js]
+```js{3} [plugins/i18n.js]
 export default {
   install: (app, options) => {
     app.provide('i18n', options)
@@ -110,7 +109,7 @@ Plugin users will now be able to inject the plugin options into their components
 
 <div class="composition-api">
 
-```vue
+```vue{4}
 <script setup>
 import { inject } from 'vue'
 
@@ -123,7 +122,7 @@ console.log(i18n.greetings.hello)
 </div>
 <div class="options-api">
 
-```js
+```js{2}
 export default {
   inject: ['i18n'],
   created() {
diff --git a/src/guide/scaling-up/ssr.md b/src/guide/scaling-up/ssr.md
index 1764994079..a8e1e9bc28 100644
--- a/src/guide/scaling-up/ssr.md
+++ b/src/guide/scaling-up/ssr.md
@@ -156,8 +156,8 @@ Notice how we need to reuse the same app implementation as on the server. This i
 
 Here we will demonstrate the most bare-bones setup. First, let's split the app creation logic into a dedicated file, `app.js`:
 
-```js
-// app.js (shared between server and client)
+```js [app.js]
+// (shared between server and client)
 import { createSSRApp } from 'vue'
 
 export function createApp() {
@@ -266,8 +266,8 @@ We can technically re-initialize all the JavaScript modules on each request, jus
 
 The recommended solution is to create a new instance of the entire application - including the router and global stores - on each request. Then, instead of directly importing it in our components, we provide the shared state using [app-level provide](/guide/components/provide-inject#app-level-provide) and inject it in components that need it:
 
-```js
-// app.js (shared between server and client)
+```js [app.js]
+// (shared between server and client)
 import { createSSRApp } from 'vue'
 import { createStore } from './store.js'
 
diff --git a/src/guide/scaling-up/state-management.md b/src/guide/scaling-up/state-management.md
index 95332706f2..ae404dcfe3 100644
--- a/src/guide/scaling-up/state-management.md
+++ b/src/guide/scaling-up/state-management.md
@@ -83,8 +83,7 @@ In Options API, reactive data is declared using the `data()` option. Internally,
 
 If you have a piece of state that should be shared by multiple instances, you can use [`reactive()`](/api/reactivity-core#reactive) to create a reactive object, and then import it into multiple components:
 
-```js
-// store.js
+```js [store.js]
 import { reactive } from 'vue'
 
 export const store = reactive({
@@ -94,8 +93,7 @@ export const store = reactive({
 
 <div class="composition-api">
 
-```vue
-<!-- ComponentA.vue -->
+```vue [ComponentA.vue]
 <script setup>
 import { store } from './store.js'
 </script>
@@ -103,8 +101,7 @@ import { store } from './store.js'
 <template>From A: {{ store.count }}</template>
 ```
 
-```vue
-<!-- ComponentB.vue -->
+```vue [ComponentB.vue]
 <script setup>
 import { store } from './store.js'
 </script>
@@ -115,8 +112,7 @@ import { store } from './store.js'
 </div>
 <div class="options-api">
 
-```vue
-<!-- ComponentA.vue -->
+```vue [ComponentA.vue]
 <script>
 import { store } from './store.js'
 
@@ -132,8 +128,7 @@ export default {
 <template>From A: {{ store.count }}</template>
 ```
 
-```vue
-<!-- ComponentB.vue -->
+```vue [ComponentB.vue]
 <script>
 import { store } from './store.js'
 
@@ -165,8 +160,7 @@ However, this also means any component importing `store` can mutate it however t
 
 While this works in simple cases, global state that can be arbitrarily mutated by any component is not going to be very maintainable in the long run. To ensure the state-mutating logic is centralized like the state itself, it is recommended to define methods on the store with names that express the intention of the actions:
 
-```js{6-8}
-// store.js
+```js{5-7} [store.js]
 import { reactive } from 'vue'
 
 export const store = reactive({
diff --git a/src/guide/scaling-up/testing.md b/src/guide/scaling-up/testing.md
index fce34ff060..6d77b80594 100644
--- a/src/guide/scaling-up/testing.md
+++ b/src/guide/scaling-up/testing.md
@@ -74,7 +74,7 @@ Because it's very self-contained, it'll be easy to invoke the increment function
 
 If any of these assertions fail, it's clear that the issue is contained within the `increment` function.
 
-```js{4-16} [helpers.spec.js]
+```js{3-15} [helpers.spec.js]
 import { increment } from './helpers'
 
 describe('increment', () => {
@@ -431,7 +431,7 @@ export function withSetup(composable) {
 }
 ```
 
-```js
+```js [foo.test.js]
 import { withSetup } from './test-utils'
 import { useFoo } from './foo'
 
diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
index 79c020e5ce..3035afd5dc 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -418,8 +418,7 @@ In cases where auto-inference is not possible (e.g. non-SFC usage or dynamic com
 
 In order to get the instance type of an imported component, we need to first get its type via `typeof`, then use TypeScript's built-in `InstanceType` utility to extract its instance type:
 
-```vue{5}
-<!-- App.vue -->
+```vue{6,7} [App.vue]
 <script setup lang="ts">
 import { useTemplateRef } from 'vue'
 import Foo from './Foo.vue'
@@ -447,8 +446,7 @@ const child = useTemplateRef<ComponentPublicInstance>('child')
 
 In cases where the component referenced is a [generic component](/guide/typescript/overview.html#generic-components), for instance `MyGenericModal`:
 
-```vue
-<!-- MyGenericModal.vue -->
+```vue [MyGenericModal.vue]
 <script setup lang="ts" generic="ContentType extends string | number">
 import { ref } from 'vue'
 
@@ -464,8 +462,7 @@ defineExpose({
 
 It needs to be referenced using `ComponentExposed` from the [`vue-component-type-helpers`](https://www.npmjs.com/package/vue-component-type-helpers) library as `InstanceType` won't work.
 
-```vue
-<!-- App.vue -->
+```vue [App.vue]
 <script setup lang="ts">
 import { useTemplateRef } from 'vue'
 import MyGenericModal from './MyGenericModal.vue'
diff --git a/src/style-guide/rules-recommended.md b/src/style-guide/rules-recommended.md
index 26291169ce..0ea2695433 100644
--- a/src/style-guide/rules-recommended.md
+++ b/src/style-guide/rules-recommended.md
@@ -264,19 +264,19 @@ const inputClasses = computed(() => {
 <div class="style-example style-example-bad">
 <h3>Bad</h3>
 
-```vue-html
+```vue-html [ComponentX.vue]
 <style>/* ... */</style>
 <script>/* ... */</script>
 <template>...</template>
 ```
 
-```vue-html
-<!-- ComponentA.vue -->
+```vue-html [ComponentA.vue]
 <script>/* ... */</script>
 <template>...</template>
 <style>/* ... */</style>
+```
 
-<!-- ComponentB.vue -->
+```vue-html [ComponentB.vue]
 <template>...</template>
 <script>/* ... */</script>
 <style>/* ... */</style>
@@ -287,25 +287,27 @@ const inputClasses = computed(() => {
 <div class="style-example style-example-good">
 <h3>Good</h3>
 
-```vue-html
-<!-- ComponentA.vue -->
+```vue-html [ComponentA.vue]
 <script>/* ... */</script>
 <template>...</template>
 <style>/* ... */</style>
+```
 
-<!-- ComponentB.vue -->
+```vue-html [ComponentB.vue]
 <script>/* ... */</script>
 <template>...</template>
 <style>/* ... */</style>
 ```
 
-```vue-html
-<!-- ComponentA.vue -->
+or
+
+```vue-html  [ComponentA.vue]
 <template>...</template>
 <script>/* ... */</script>
 <style>/* ... */</style>
+```
 
-<!-- ComponentB.vue -->
+```vue-html [ComponentB.vue]
 <template>...</template>
 <script>/* ... */</script>
 <style>/* ... */</style>
diff --git a/src/tutorial/src/step-12/description.md b/src/tutorial/src/step-12/description.md
index 79d5f4cd14..eb7027d419 100644
--- a/src/tutorial/src/step-12/description.md
+++ b/src/tutorial/src/step-12/description.md
@@ -5,8 +5,7 @@ A child component can accept input from the parent via **props**. First, it need
 <div class="composition-api">
 <div class="sfc">
 
-```vue
-<!-- ChildComp.vue -->
+```vue [ChildComp.vue]
 <script setup>
 const props = defineProps({
   msg: String