diff --git a/docs/1.getting-started/5.routing.md b/docs/1.getting-started/5.routing.md
index e732502f6c..e88d9e8c24 100644
--- a/docs/1.getting-started/5.routing.md
+++ b/docs/1.getting-started/5.routing.md
@@ -15,7 +15,7 @@ This file system routing uses naming conventions to create dynamic and nested ro
 ::code-group
 
 ```bash [Directory Structure]
-| pages/
+-| pages/
 ---| about.vue
 ---| index.vue
 ---| posts/
diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md
index 8fb3a0c59f..0656b96e75 100644
--- a/docs/2.guide/2.directory-structure/1.components.md
+++ b/docs/2.guide/2.directory-structure/1.components.md
@@ -8,9 +8,9 @@ navigation.icon: i-ph-folder
 Nuxt automatically imports any components in this directory (along with components that are registered by any modules you may be using).
 
 ```bash [Directory Structure]
-| components/
---| AppHeader.vue
---| AppFooter.vue
+-| components/
+---| AppHeader.vue
+---| AppFooter.vue
 ```
 
 ```html [app.vue]
@@ -28,10 +28,10 @@ Nuxt automatically imports any components in this directory (along with componen
 If you have a component in nested directories such as:
 
 ```bash [Directory Structure]
-| components/
---| base/
-----| foo/
-------| Button.vue
+-| components/
+---| base/
+-----| foo/
+-------| Button.vue
 ```
 
 ... then the component's name will be based on its own path directory and filename, with duplicate segments being removed. Therefore, the component's name will be:
@@ -285,8 +285,8 @@ export default defineNuxtConfig({
 Now you can register server-only components with the `.server` suffix and use them anywhere in your application automatically.
 
 ```bash [Directory Structure]
-| components/
---| HighlightedMarkdown.server.vue
+-| components/
+---| HighlightedMarkdown.server.vue
 ```
 
 ```vue [pages/example.vue]
@@ -359,9 +359,9 @@ Slots can be interactive and are wrapped within a `<div>` with `display: content
 In this case, the `.server` + `.client` components are two 'halves' of a component and can be used in advanced use cases for separate implementations of a component on server and client side.
 
 ```bash [Directory Structure]
-| components/
---| Comments.client.vue
---| Comments.server.vue
+-| components/
+---| Comments.client.vue
+---| Comments.server.vue
 ```
 
 ```vue [pages/example.vue]
@@ -389,15 +389,15 @@ You can use the `components:dirs` hook to extend the directory list without requ
 Imagine a directory structure like this:
 
 ```bash [Directory Structure]
-| node_modules/
+-| node_modules/
 ---| awesome-ui/
-------| components/
----------| Alert.vue
----------| Button.vue
-------| nuxt.js
-| pages/
+-----| components/
+-------| Alert.vue
+-------| Button.vue
+-----| nuxt.js
+-| pages/
 ---| index.vue
-| nuxt.config.js
+-| nuxt.config.js
 ```
 
 Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook:
diff --git a/docs/2.guide/2.directory-structure/1.composables.md b/docs/2.guide/2.directory-structure/1.composables.md
index dbd3510b56..ed96746656 100644
--- a/docs/2.guide/2.directory-structure/1.composables.md
+++ b/docs/2.guide/2.directory-structure/1.composables.md
@@ -85,11 +85,11 @@ export const useHello = () => {
 Nuxt only scans files at the top level of the [`composables/` directory](/docs/guide/directory-structure/composables), e.g.:
 
 ```bash [Directory Structure]
-| composables/
+-| composables/
 ---| index.ts     // scanned
 ---| useFoo.ts    // scanned
------| nested/
--------| utils.ts // not scanned
+---| nested/
+-----| utils.ts   // not scanned
 ```
 
 Only `composables/index.ts` and `composables/useFoo.ts` would be searched for imports.
diff --git a/docs/2.guide/2.directory-structure/1.middleware.md b/docs/2.guide/2.directory-structure/1.middleware.md
index 3fbcc732ce..d17c6ceb7c 100644
--- a/docs/2.guide/2.directory-structure/1.middleware.md
+++ b/docs/2.guide/2.directory-structure/1.middleware.md
@@ -72,11 +72,11 @@ Middleware runs in the following order:
 
 For example, assuming you have the following middleware and component:
 
-```text [middleware/ directory]
-middleware/
---| analytics.global.ts
---| setup.global.ts
---| auth.ts
+```bash [middleware/ directory]
+-| middleware/
+---| analytics.global.ts
+---| setup.global.ts
+---| auth.ts
 ```
 
 ```vue twoslash [pages/profile.vue]
@@ -105,11 +105,11 @@ By default, global middleware is executed alphabetically based on the filename.
 
 However, there may be times you want to define a specific order. For example, in the last scenario, `setup.global.ts` may need to run before `analytics.global.ts`. In that case, we recommend prefixing global middleware with 'alphabetical' numbering.
 
-```text [Directory structure]
-middleware/
---| 01.setup.global.ts
---| 02.analytics.global.ts
---| auth.ts
+```bash [Directory structure]
+-| middleware/
+---| 01.setup.global.ts
+---| 02.analytics.global.ts
+---| auth.ts
 ```
 
 ::note
diff --git a/docs/2.guide/2.directory-structure/1.pages.md b/docs/2.guide/2.directory-structure/1.pages.md
index ce14e9075f..0efb13daac 100644
--- a/docs/2.guide/2.directory-structure/1.pages.md
+++ b/docs/2.guide/2.directory-structure/1.pages.md
@@ -159,7 +159,7 @@ Example:
 ```bash [Directory Structure]
 -| pages/
 ---| parent/
-------| child.vue
+-----| child.vue
 ---| parent.vue
 ```
 
@@ -408,7 +408,7 @@ However, you can use [Nuxt Layers](/docs/getting-started/layers) to create group
 ```bash [Directory Structure]
 -| some-app/
 ---| nuxt.config.ts
----| pages
+---| pages/
 -----| app-page.vue
 -| nuxt.config.ts
 ```