diff --git a/docs/content/1.getting-started/5.seo-meta.md b/docs/content/1.getting-started/5.seo-meta.md
index 412dd1343c7..6beae21b880 100644
--- a/docs/content/1.getting-started/5.seo-meta.md
+++ b/docs/content/1.getting-started/5.seo-meta.md
@@ -239,7 +239,8 @@ useHead({
 </script>
 ```
 
-:LinkExample{link="/examples/composables/use-head"}
+::LinkExample{link="/examples/composables/use-head"}
+::
 
 :ReadMore{link="/guide/directory-structure/pages/#page-metadata"}
 
diff --git a/docs/content/1.getting-started/6.data-fetching.md b/docs/content/1.getting-started/6.data-fetching.md
index f99e29a5913..93c1f23484b 100644
--- a/docs/content/1.getting-started/6.data-fetching.md
+++ b/docs/content/1.getting-started/6.data-fetching.md
@@ -32,7 +32,8 @@ const { data: count } = await useFetch('/api/count')
 </template>
 ```
 
-:LinkExample{link="/examples/composables/use-fetch"}
+::LinkExample{link="/examples/composables/use-fetch"}
+::
 
 ## `useLazyFetch`
 
@@ -98,7 +99,8 @@ const { data } = await useAsyncData('count', () => $fetch('/api/count'))
 </template>
 ```
 
-:LinkExample{link="/examples/composables/use-async-data"}
+::LinkExample{link="/examples/composables/use-async-data"}
+::
 
 ## `useLazyAsyncData`
 
diff --git a/docs/content/1.getting-started/7.state-management.md b/docs/content/1.getting-started/7.state-management.md
index 716031dcef8..836f3bf9665 100644
--- a/docs/content/1.getting-started/7.state-management.md
+++ b/docs/content/1.getting-started/7.state-management.md
@@ -53,7 +53,8 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 </template>
 ```
 
-:LinkExample{link="/examples/composables/use-state"}
+::LinkExample{link="/examples/composables/use-state"}
+::
 
 ::ReadMore{link="/api/composables/use-state"}
 ::
@@ -62,7 +63,8 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 
 In this example, we use a composable that detects the user's default locale from the HTTP request headers and keeps it in a `locale` state.
 
-:LinkExample{link="/examples/other/locale"}
+::LinkExample{link="/examples/other/locale"}
+::
 
 ## Shared State
 
diff --git a/docs/content/1.getting-started/8.error-handling.md b/docs/content/1.getting-started/8.error-handling.md
index 9d8dfa4bb9e..bdffc97b99e 100644
--- a/docs/content/1.getting-started/8.error-handling.md
+++ b/docs/content/1.getting-started/8.error-handling.md
@@ -158,4 +158,5 @@ If you navigate to another route, the error will be cleared automatically.
 </template>
 ```
 
-:LinkExample{link="/examples/app/error-handling"}
+::LinkExample{link="/examples/app/error-handling"}
+::
diff --git a/docs/content/2.guide/2.directory-structure/1.components.md b/docs/content/2.guide/2.directory-structure/1.components.md
index d85986fac23..000aafd66f9 100644
--- a/docs/content/2.guide/2.directory-structure/1.components.md
+++ b/docs/content/2.guide/2.directory-structure/1.components.md
@@ -283,4 +283,5 @@ export default {
 
 It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.
 
-:LinkExample{link="/examples/auto-imports/components"}
+::LinkExample{link="/examples/auto-imports/components"}
+::
diff --git a/docs/content/2.guide/2.directory-structure/1.composables.md b/docs/content/2.guide/2.directory-structure/1.composables.md
index f212813ce86..ee087f4481f 100644
--- a/docs/content/2.guide/2.directory-structure/1.composables.md
+++ b/docs/content/2.guide/2.directory-structure/1.composables.md
@@ -46,7 +46,8 @@ const foo = useFoo()
 </script>
 ```
 
-:LinkExample{link="/examples/auto-imports/composables"}
+::LinkExample{link="/examples/auto-imports/composables"}
+::
 
 ## Examples
 
diff --git a/docs/content/2.guide/2.directory-structure/1.layouts.md b/docs/content/2.guide/2.directory-structure/1.layouts.md
index 9533dec432d..d9dcb68961e 100644
--- a/docs/content/2.guide/2.directory-structure/1.layouts.md
+++ b/docs/content/2.guide/2.directory-structure/1.layouts.md
@@ -131,7 +131,8 @@ definePageMeta({
 </script>
 ```
 
-:LinkExample{link="/examples/routing/layouts"}
+::LinkExample{link="/examples/routing/layouts"}
+::
 
 ## Overriding a Layout on a Per-page Basis
 
diff --git a/docs/content/2.guide/2.directory-structure/1.middleware.md b/docs/content/2.guide/2.directory-structure/1.middleware.md
index 3a0c3b56671..b7933f06210 100644
--- a/docs/content/2.guide/2.directory-structure/1.middleware.md
+++ b/docs/content/2.guide/2.directory-structure/1.middleware.md
@@ -94,4 +94,5 @@ definePageMeta({
 
 Now, before navigation to that page can complete, the `auth` route middleware will be run.
 
-:LinkExample{link="/examples/routing/middleware"}
+::LinkExample{link="/examples/routing/middleware"}
+::
diff --git a/docs/content/2.guide/2.directory-structure/1.pages.md b/docs/content/2.guide/2.directory-structure/1.pages.md
index a49d0060c2a..a90ace6d0f9 100644
--- a/docs/content/2.guide/2.directory-structure/1.pages.md
+++ b/docs/content/2.guide/2.directory-structure/1.pages.md
@@ -220,7 +220,8 @@ definePageMeta({
 </script>
 ```
 
-:LinkExample{link="/examples/routing/pages"}
+::LinkExample{link="/examples/routing/pages"}
+::
 
 ## Page Metadata
 
diff --git a/docs/content/2.guide/2.directory-structure/1.plugins.md b/docs/content/2.guide/2.directory-structure/1.plugins.md
index 15e0d61782d..0e1c2ef798f 100644
--- a/docs/content/2.guide/2.directory-structure/1.plugins.md
+++ b/docs/content/2.guide/2.directory-structure/1.plugins.md
@@ -179,4 +179,5 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 :ReadMore{link="https://vuejs.org/guide/reusability/custom-directives.html"}
 
-:LinkExample{link="/examples/app/plugins"}
+::LinkExample{link="/examples/app/plugins"}
+::
diff --git a/docs/content/3.api/1.composables/use-cookie.md b/docs/content/3.api/1.composables/use-cookie.md
index dc75421a5fb..e7795fb26d7 100644
--- a/docs/content/3.api/1.composables/use-cookie.md
+++ b/docs/content/3.api/1.composables/use-cookie.md
@@ -157,4 +157,5 @@ export default defineEventHandler(event => {
 })
 ```
 
-:LinkExample{link="/examples/composables/use-cookie"}
+::LinkExample{link="/examples/composables/use-cookie"}
+::
diff --git a/docs/content/3.api/1.composables/use-fetch.md b/docs/content/3.api/1.composables/use-fetch.md
index 8f4e4a193fc..7e3ef8e9be7 100644
--- a/docs/content/3.api/1.composables/use-fetch.md
+++ b/docs/content/3.api/1.composables/use-fetch.md
@@ -111,4 +111,5 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
 
 :ReadMore{link="/getting-started/data-fetching"}
 
-:LinkExample{link="/examples/composables/use-fetch"}
+::LinkExample{link="/examples/composables/use-fetch"}
+::
diff --git a/docs/content/3.api/2.components/4.nuxt-link.md b/docs/content/3.api/2.components/4.nuxt-link.md
index cf73bff0f3d..e14a3b6689d 100644
--- a/docs/content/3.api/2.components/4.nuxt-link.md
+++ b/docs/content/3.api/2.components/4.nuxt-link.md
@@ -124,4 +124,5 @@ defineNuxtLink({
 - **exactActiveClass**: A default class to apply on exact active links. Works the same as [Vue Router's `linkExactActiveClass` option](https://router.vuejs.org/api/#linkexactactiveclass). Defaults to Vue Router's default (`"router-link-exact-active"`)
 - **prefetchedClass**: A default class to apply to links that have been prefetched.
 
-:LinkExample{link="/examples/routing/nuxt-link"}
+::LinkExample{link="/examples/routing/nuxt-link"}
+::
diff --git a/docs/content/3.api/2.components/8.teleports.md b/docs/content/3.api/2.components/8.teleports.md
index fba5b53e87a..2d5bc438fa6 100644
--- a/docs/content/3.api/2.components/8.teleports.md
+++ b/docs/content/3.api/2.components/8.teleports.md
@@ -37,4 +37,5 @@ The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.htm
 </template>
 ```
 
-:LinkExample{link="/examples/app/teleport"}
+::LinkExample{link="/examples/app/teleport"}
+::