diff --git a/app/app.vue b/app/app.vue
index 12a38a8..530d87e 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -37,3 +37,46 @@ provide('navigation', navigation)
 
   <UNotifications />
 </template>
+
+<style>
+:root {
+  --twoslash-popup-bg: rgb(var(--color-gray-800) / 1);
+  --twoslash-popup-color: rgb(var(--color-gray-300) / 1);
+  --twoslash-docs-color: inherit;
+  --twoslash-docs-font: inherit;
+  --twoslash-code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  --twoslash-underline-color: #8888;
+  --twoslash-border-color: rgb(var(--color-gray-700) / 1);
+  --twoslash-cursor-color: rgb(var(--color-primary-DEFAULT) / 1);
+  --twoslash-matched-color: rgb(var(--color-primary-DEFAULT) / 1);
+}
+
+html:not(.dark) {
+  --twoslash-popup-bg: rgb(var(--color-gray-100) / 1);
+  --twoslash-popup-color: rgb(var(--color-gray-600) / 1);
+  --twoslash-border-color: rgb(var(--color-gray-300) / 1);
+}
+
+.twoslash-floating {
+  z-index: 11;
+}
+
+.twoslash-popup-container .twoslash-popup-code {
+  font-size: 0.9em;
+}
+
+.twoslash-popup-container .twoslash-popup-code .line {
+  display: block;
+}
+
+.twoslash-popup-container .shiki .line {
+  --shiki-default-bg: transparent;
+  --shiki-dark-bg: transparent;
+}
+
+.twoslash-floating .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
+  color: inherit;
+  opacity: 0.5;
+}
+</style>
diff --git a/app/nuxt.config.ts b/app/nuxt.config.ts
index 181e6a8..1ac4c66 100644
--- a/app/nuxt.config.ts
+++ b/app/nuxt.config.ts
@@ -9,7 +9,7 @@ const ssr = Boolean(isProd || process.env.NUXT_DOCS_SSR)
 
 export default defineNuxtConfig({
   ssr,
-  modules: ['@nuxt/fonts', '@nuxt/content', isProd && '@nuxtjs/plausible', '@nuxt/ui'],
+  modules: ['@nuxt/fonts', 'nuxt-content-twoslash', '@nuxt/content', isProd && '@nuxtjs/plausible', '@nuxt/ui'],
   ui: {
     icons: [],
   },
@@ -67,6 +67,14 @@ export default defineNuxtConfig({
     viewer: dev,
     quiet: !dev,
   },
+  twoslash: {
+    floatingVueOptions: {
+      classMarkdown: 'prose prose-primary dark:prose-invert',
+    },
+    // Skip Twoslash in dev to improve performance.
+    enableInDev: !dev,
+    throws: false,
+  },
   typescript: {
     strict: false,
     includeWorkspace: true,
diff --git a/bun.lockb b/bun.lockb
index 7f7638b..6005496 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/docs/1.guide/content-transformation.md b/docs/1.guide/content-transformation.md
index d5c5212..507842b 100644
--- a/docs/1.guide/content-transformation.md
+++ b/docs/1.guide/content-transformation.md
@@ -93,5 +93,73 @@ Generate steps by useing standard markdown numbered lists!
 
 3. Done ✅
 
+## Twoslash Code Blocks
+
+[nuxt-content-twoslash](https://github.com/antfu/nuxt-content-twoslash#nuxt-content-twoslash) is only enabled for production builds to enhance development experience.
+
+```md
+    ```ts twoslash [index.ts]
+    console.log("Hello, World")
+    ```
+
+    ```ts twoslash [nuxt.config.ts]
+    export default defineNuxtConfig({
+      modules: [],
+      nitro: {
+        static: true
+      }
+    })
+    ```
+
+    ```vue twoslash [index.vue]
+    <script lang="ts" setup>
+    import { ref, onMounted } from 'vue'
+
+    const name = ref("World")
+    //    ^?
+
+
+    onMounted(() => {
+      console.log("Hello, World")
+    })
+    </script>
+
+    <template>
+      <div>Hello, {{ name }}</div>
+    </template>
+    ```
+```
+
+```ts twoslash [index.ts]
+console.log("Hello, World")
+```
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: [],
+  nitro: {
+    static: true
+  }
+})
+```
+
+```vue twoslash [index.vue]
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+
+const name = ref("World")
+//    ^?
+
+
+onMounted(() => {
+  console.log("Hello, World")
+})
+</script>
+
+<template>
+  <div>Hello, {{ name }}</div>
+</template>
+```
+
 > [!TIP]
 > Do you have an idea for a new content transformation, feel free to [open an issue](https://github.com/unjs/undocs/issues/new?assignees=&labels=pending+triage&projects=&template=feature-request.yml)!
diff --git a/package.json b/package.json
index 337a543..c42d4fe 100644
--- a/package.json
+++ b/package.json
@@ -43,13 +43,15 @@
     "consola": "^3.2.3",
     "defu": "^6.1.4",
     "is-buffer": "^2.0.5",
+    "nitropack": "^2.9.5",
     "nuxi": "^3.11.1",
     "nuxt": "^3.11.1",
-    "nitropack": "^2.9.5",
     "nuxt-build-cache": "^0.1.1",
+    "nuxt-content-twoslash": "^0.0.10",
     "pkg-types": "^1.0.3",
     "scule": "^1.3.0",
     "tailwindcss": "^3.4.3",
+    "twoslash": "^0.2.5",
     "unctx": "^2.3.1",
     "unstorage": "^1.10.2",
     "vue": "^3.4.21",
@@ -67,4 +69,4 @@
     "vue-tsc": "^2.0.7"
   },
   "packageManager": "bun@1.0.26"
-}
\ No newline at end of file
+}