feat: more enhanced code blocks (#2602)

Author: jay-es

src/api/sfc-script-setup.md

@@ -298,16 +298,20 @@ function inc() {
 :::warning
 もし `defineModel` props に `default` 値を指定し、親コンポーネントからこの props に何も値を与えなかった場合、親と子のコンポーネント間で同期が取れなくなる可能性があります。以下の例では、親コンポーネントの `myRef` は undefined ですが、子コンポーネントの `model` は 1 です:
 
-```js
-// 子コンポーネント:
+```vue [Child.vue]
+<script setup>
 const model = defineModel({ default: 1 })
+</script>
+```
 
-// 親コンポーネント:
+```vue [Parent.vue]
+<script setup>
 const myRef = ref()
-```
+</script>
 
-```html
-<Child v-model="myRef"></Child>
+<template>
+  <Child v-model="myRef" />
+</template>
 ```
 
 :::

src/guide/built-ins/transition.md

@@ -469,8 +469,7 @@ JavaScript のみでトランジションを利用する場合、通常は `:css
 
 トランジションは、Vue のコンポーネントシステムによって再利用できます。再利用可能なトランジションを作成するには、`<Transition>` コンポーネントをラップしたコンポーネントを作成し、スロットコンテンツを受け渡します:
 
-```vue{5}
-<!-- MyTransition.vue -->
+```vue{6} [MyTransition.vue]
 <script>
 // JavaScript フックのロジックを記載 ...
 </script>
@@ -615,7 +614,7 @@ export default {
   data() {
     return {
       count: 1,
-      interval: null 
+      interval: null
     }
   },
   mounted() {

src/guide/components/provide-inject.md

@@ -327,8 +327,7 @@ export default {
 
 シンボルは専用のファイルに書き出しておくことをおすすめします:
 
-```js
-// keys.js
+```js [keys.js]
 export const myInjectionKey = Symbol()
 ```
 

src/guide/components/v-model.md

@@ -12,8 +12,7 @@
 
 Vue 3.4 以降は、[`defineModel()`](/api/sfc-script-setup#definemodel) マクロを使うことが推奨されています:
 
-```vue
-<!-- Child.vue -->
+```vue [Child.vue]
 <script setup>
 const model = defineModel()
 
@@ -30,8 +29,7 @@ function update() {
 
 親は `v-model` で値をバインドできます:
 
-```vue-html
-<!-- Parent.vue -->
+```vue-html [Parent.vue]
 <Child v-model="countModel" />
 ```
 
@@ -63,8 +61,7 @@ const model = defineModel()
 
 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'])
 
 すると、親コンポーネントの `v-model="foo"` は次のようにコンパイルされます:
 
-```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
 もし `defineModel` props に `default` 値を指定し、親コンポーネントからこの props に何も値を与えなかった場合、親と子のコンポーネント間で同期が取れなくなる可能性があります。以下の例では、親コンポーネントの `myRef` は undefined ですが、子コンポーネントの `model` は 1 です:
 
-**子コンポーネント:**
-
-```js
+```vue [Child.vue]
+<script setup>
 const model = defineModel({ default: 1 })
+</script>
 ```
 
-**親コンポーネント:**
-
-```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 @@ const myRef = ref()
 
 実際には次のようになります:
 
-```vue
-<!-- CustomInput.vue -->
+```vue [CustomInput.vue]
 <script>
 export default {
   props: ['modelValue'],
@@ -183,8 +178,7 @@ export default {
 
 このコンポーネントで `v-model` を実装するもう 1 つの方法は、getter と setter の両方を持つ、書き込み可能な `computed` プロパティを使用することです。`get` メソッドは `modelValue` プロパティを返し、`set` メソッドは対応するイベントを発行する必要があります:
 
-```vue
-<!-- CustomInput.vue -->
+```vue [CustomInput.vue]
 <script>
 export default {
   props: ['modelValue'],
@@ -221,8 +215,7 @@ export default {
 
 子コンポーネントでは、`defineModel()` の第一引数に文字列を渡すことで、対応する引数をサポートできます:
 
-```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>3.4 以前の使用法</summary>
 
-```vue
-<!-- MyComponent.vue -->
+```vue [MyComponent.vue]
 <script setup>
 defineProps({
   title: {
@@ -271,8 +263,7 @@ defineEmits(['update:title'])
 
 この場合、デフォルトの `modelValue` props と `update:modelValue` イベントの代わりに、子コンポーネントは `title` props を受け取り、親コンポーネントの値を更新するためには `update:title` イベントを発行します:
 
-```vue
-<!-- MyComponent.vue -->
+```vue [MyComponent.vue]
 <script>
 export default {
   props: ['title'],
@@ -412,7 +403,7 @@ console.log(modifiers) // { capitalize: true }
 
 修飾子に基づいて値の読み書きを条件付きで調整するために、`defineModel()` に `get` と `set` オプションを渡すことができます。これら 2 つのオプションは、モデルの ref の読み取り・設定時に値を受け取り、変換された値を返す必要があります。以下は `set` オプションを使って `capitalize` 修飾子を実装する方法です:
 
-```vue{6-8}
+```vue{4-6}
 <script setup>
 const [model, modifiers] = defineModel({
   set(value) {

src/guide/essentials/component-basics.md

@@ -188,8 +188,7 @@ props はコンポーネントに登録できるカスタム属性のことで
 
 <div class="options-api">
 
-```vue
-<!-- BlogPost.vue -->
+```vue [BlogPost.vue]
 <script>
 export default {
   props: ['title']
@@ -206,8 +205,7 @@ props 属性に値が渡されると、その値はコンポーネントイン
 </div>
 <div class="composition-api">
 
-```vue
-<!-- BlogPost.vue -->
+```vue [BlogPost.vue]
 <script setup>
 defineProps(['title'])
 </script>
@@ -352,8 +350,8 @@ const postFontSize = ref(1)
 
 では、`<BlogPost>` コンポーネントのテンプレートにボタンを追加してみましょう:
 
-```vue{5}
-<!-- BlogPost.vue, omitting <script> -->
+```vue{5} [BlogPost.vue]
+<!-- omitting <script> -->
 <template>
   <div class="blog-post">
     <h4>{{ title }}</h4>
@@ -373,8 +371,8 @@ const postFontSize = ref(1)
 
 そして、子コンポーネントは組み込みの [**`$emit`** メソッド](/api/component-instance#emit)を呼び出し、イベント名を渡すことによって自身のイベントを発行することができます:
 
-```vue{5}
-<!-- BlogPost.vue, omitting <script> -->
+```vue{5} [BlogPost.vue]
+<!-- omitting <script> -->
 <template>
   <div class="blog-post">
     <h4>{{ title }}</h4>
@@ -400,8 +398,7 @@ const postFontSize = ref(1)
 
 <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 @@ HTML 要素と同じように、以下のようにコンポーネントにコン
 
 これは Vue のカスタム要素 `<slot>` を用いて実現することができます:
 
-```vue{5}
-<!-- AlertBox.vue -->
+```vue{4} [AlertBox.vue]
 <template>
   <div class="alert-box">
     <strong>This is an Error for Demo Purposes</strong>

src/guide/extras/web-components.md

@@ -43,8 +43,7 @@ export default {
 
 #### Vue CLI 設定の例 {#example-vue-cli-config}
 
-```js
-// vue.config.js
+```js [vue.config.js]
 module.exports = {
   chainWebpack: (config) => {
     config.module
@@ -218,8 +217,7 @@ Vue でカスタム要素をビルドする場合、要素は Vue のランタ
 
 個々の要素コンストラクタをエクスポートして、ユーザーに必要に応じてインポートさせたり、必要なタグ名で登録できる柔軟性を持たせることをおすすめします。また、すべての要素を自動的に登録する便利な関数をエクスポートすることもできます。以下は、Vue カスタム要素ライブラリのエントリーポイントの例です:
 
-```js
-// elements.js
+```js [elements.js]
 
 import { defineCustomElement } from 'vue'
 import Foo from './MyFoo.ce.vue'
@@ -311,9 +309,7 @@ Vue で構築されていないカスタム要素の SFC テンプレートで
 
 いくつかの JS プロパティとイベントが定義されたカスタム要素があり、それが `some-lib` というライブラリーに同梱されているとします:
 
-```ts
-// file: some-lib/src/SomeElement.ts
-
+```ts [some-lib/src/SomeElement.ts]
 // 型付き JS プロパティを持つクラスを定義します。
 export class SomeElement extends HTMLElement {
   foo: number = 123
@@ -351,9 +347,7 @@ export class AppleFellEvent extends Event {
 
 Vue でカスタム要素の型定義を簡単に登録するための型ヘルパーを作成してみましょう
 
-```ts
-// file: some-lib/src/DefineCustomElement.ts
-
+```ts [some-lib/src/DefineCustomElement.ts]
 // 定義する必要のある要素ごとに、このタイプのヘルパーを再利用することができます。
 type DefineCustomElement<
   ElementType extends HTMLElement,
@@ -394,9 +388,7 @@ type VueEmit<T extends EventMap> = EmitFn<{
 
 型ヘルパーを使用して、Vue テンプレートで型チェックのために公開すべき JS プロパティを選択できます:
 
-```ts
-// file: some-lib/src/SomeElement.vue.ts
-
+```ts [some-lib/src/SomeElement.vue.ts]
 import {
   SomeElement,
   SomeElementAttributes,
@@ -465,7 +457,7 @@ onMounted(() => {
 
 要素に型定義がない場合、プロパティとイベントの型はより手動で定義することができます:
 
-```vue
+```vue [SomeElementImpl.vue]
 <script setup lang="ts">
 // `some-lib` が型定義のないプレーンな JavaScript で、TypeScript が型を
 // 推論できないと仮定します:

src/guide/reusability/composables.md

@@ -21,7 +21,7 @@ Vue アプリケーションの文脈で「コンポーザブル（composable）
 
 コンポーネント内で直接 Composition API を使ってマウストラッキング機能を実装すると、次のようになります:
 
-```vue
+```vue [MouseComponent.vue]
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 
@@ -42,8 +42,7 @@ onUnmounted(() => window.removeEventListener('mousemove', update))
 
 しかし、複数のコンポーネントで同じロジックを再利用したい場合はどうでしょうか？　コンポーザブル関数として外部ファイルにロジックを抽出できます:
 
-```js
-// mouse.js
+```js [mouse.js]
 import { ref, onMounted, onUnmounted } from 'vue'
 
 // 慣習として、コンポーザブル関数の名前は "use" で始めます
@@ -70,7 +69,7 @@ export function useMouse() {
 
 そしてこれがコンポーネント内での使い方です:
 
-```vue
+```vue [MouseComponent.vue]
 <script setup>
 import { useMouse } from './mouse.js'
 
@@ -92,8 +91,7 @@ const { x, y } = useMouse()
 
 例えば、DOM イベントリスナーを追加・削除するロジックを独自のコンポーザブルに抽出できます:
 
-```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) {
 
 これで `useMouse()` コンポーザブルは次のように簡略化できます:
 
-```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('...')
 
 データを取得する必要があるすべてのコンポーネントでこのパターンを繰り返さなければならないのは面倒です。コンポーザブルに抽出してみましょう:
 
-```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}`)
 
 [`watchEffect()`](/api/reactivity-core.html#watcheffect) と [`toValue()`](/api/reactivity-utilities.html#tovalue) API を使用して、既存の実装をリファクタリングできます:
 
-```js{8,13}
-// fetch.js
+```js{7,12} [fetch.js]
 import { ref, watchEffect, toValue } from 'vue'
 
 export function useFetch(url) {