docs: escape ] in code-block filenames (#22389)

docs/1.getting-started/5.routing.md

@@ -71,7 +71,7 @@ When a `<NuxtLink>` enters the viewport on the client side, Nuxt will automatica
 
 The `useRoute()` composable can be used in a `<script setup>` block or a `setup()` method of a Vue component to access the current route details.
 
-```vue [pages/posts/[id].vue]
+```vue [pages/posts/[id\\].vue]
 <script setup lang="ts">
 const route = useRoute()
 
@@ -133,7 +133,7 @@ The `validate` property accepts the `route` as an argument. You can return a boo
 
 If you have a more complex use case, then you can use anonymous route middleware instead.
 
-```vue [pages/posts/[id].vue]
+```vue [pages/posts/[id\\].vue]
 <script setup lang="ts">
 definePageMeta({
   validate: async (route) => {

docs/1.getting-started/5.transitions.md

@@ -318,7 +318,7 @@ To apply dynamic transitions using conditional logic, you can leverage inline [m
 
 ::code-group
 
-```html [pages/[id].vue]
+```html [pages/[id\\].vue]
 <script setup lang="ts">
 definePageMeta({
   pageTransition: {

docs/1.getting-started/8.error-handling.md

@@ -111,7 +111,7 @@ If you throw an error created with `createError`:
 
 ### Example
 
-```vue [pages/movies/[slug].vue]
+```vue [pages/movies/[slug\\].vue]
 <script setup lang="ts">
 const route = useRoute()
 const { data } = await useFetch(`/api/movies/${route.params.slug}`)

docs/2.guide/2.directory-structure/1.content.md

@@ -67,7 +67,7 @@ The module automatically loads and parses them.
 
 To render content pages, add a [catch-all route](/docs/guide/directory-structure/pages/#catch-all-route) using the `ContentDoc` component:
 
-```vue [pages/[...slug].vue]
+```vue [pages/[...slug\\].vue]
 <template>
   <main>
     <ContentDoc />

docs/2.guide/2.directory-structure/1.pages.md

@@ -110,7 +110,7 @@ If you want a parameter to be _optional_, you must enclose it in double square b
 
 Given the example above, you can access group/id within your component via the `$route` object:
 
-```vue [pages/users-[group]/[id].vue]
+```vue [pages/users-[group\\]/[id\\].vue]
 <template>
   <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
 </template>
@@ -138,7 +138,7 @@ if (route.params.group === 'admins' && !route.params.id) {
 
 If you need a catch-all route, you create it by using a file named like `[...slug].vue`. This will match _all_ routes under that path.
 
-```vue [pages/[...slug].vue]
+```vue [pages/[...slug\\].vue]
 <template>
   <p>{{ $route.params.slug }}</p>
 </template>

docs/2.guide/2.directory-structure/1.server.md

@@ -151,7 +151,7 @@ Server routes can use dynamic parameters within brackets in the file name like `
 
 **Example:**
 
-```ts [server/api/hello/[name].ts]
+```ts [server/api/hello/[name\\].ts]
 export default defineEventHandler((event) => `Hello, ${event.context.params.name}!`)
 ```
 
@@ -181,11 +181,11 @@ Catch-all routes are helpful for fallback route handling. For example, creating
 
 **Examples:**
 
-```ts [server/api/foo/[...].ts]
+```ts [server/api/foo/[...\\].ts]
 export default defineEventHandler(() => `Default foo handler`)
 ```
 
-```ts [server/api/[...].ts]
+```ts [server/api/[...\\].ts]
 export default defineEventHandler(() => `Default api handler`)
 ```
 
@@ -221,7 +221,7 @@ If no errors are thrown, a status code of `200 OK` will be returned. Any uncaugh
 
 To return other error codes, throw an exception with `createError`
 
-```ts [server/api/validation/[id].ts]
+```ts [server/api/validation/[id\\].ts]
 export default defineEventHandler((event) => {
   const id = parseInt(event.context.params.id) as number
   if (!Number.isInteger(id)) {
@@ -240,7 +240,7 @@ To return other status codes, you can use the `setResponseStatus` utility.
 
 For example, to return `202 Accepted`
 
-```ts [server/api/validation/[id].ts]
+```ts [server/api/validation/[id\\].ts]
 export default defineEventHandler((event) => {
   setResponseStatus(event, 202)
 })
@@ -284,7 +284,7 @@ export default defineNuxtConfig({
 
 ### Using a Nested Router
 
-```ts [server/api/hello/[...slug].ts]
+```ts [server/api/hello/[...slug\\].ts]
 import { createRouter, defineEventHandler, useBase } from 'h3'
 
 const router = createRouter()

docs/3.api/1.composables/use-route.md

@@ -13,7 +13,7 @@ Within the template of a Vue component, you can access the route using `$route`.
 
 In the following example, we call an API via [`useFetch`](/docs/api/composables/use-fetch) using a dynamic page parameter - `slug` - as part of the URL.
 
-```html [~/pages/[slug].vue]
+```html [~/pages/[slug\\].vue]
 <script setup lang="ts">
 const route = useRoute()
 const { data: mountain } = await useFetch(`https://api.nuxtjs.dev/mountains/${route.params.slug}`)

docs/3.api/3.utils/create-error.md

@@ -19,7 +19,7 @@ If you throw an error created with `createError`:
 
 ### Example
 
-```vue [pages/movies/[slug].vue]
+```vue [pages/movies/[slug\\].vue]
 <script setup lang="ts">
 const route = useRoute()
 const { data } = await useFetch(`/api/movies/${route.params.slug}`)

docs/7.migration/7.component-options.md

@@ -114,7 +114,7 @@ See [layout migration](/docs/migration/pages-and-layouts).
 
 The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).
 
-```diff [pages/users/[id].vue]
+```diff [pages/users/[id\\].vue]
 - <script>
 - export default {
 -   async validate({ params }) {
@@ -135,7 +135,7 @@ The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as
 
 This is not supported in Nuxt 3. Instead, you can directly use a watcher to trigger refetching data.
 
-```vue [pages/users/[id].vue]
+```vue [pages/users/[id\\].vue]
 <script setup lang="ts">
 const route = useRoute()
 const { data, refresh } = await useFetch('/api/user')