chore(playground): fix markdown rendering issues

- Remove duplicate markdown-body wrapper from unplugin-vue-markdown
- Wrap tables in scrollable container to prevent overflow-x
- Open external links in new window
- Remove unsupported [!TIP] callout from intro

Author: johnleider

apps/playground/src/App.vue

@@ -85,6 +85,10 @@
       padding: 0.5rem 1rem;
     }
 
+    > .overflow-x-auto {
+      margin-bottom: 1rem;
+    }
+
     table {
       width: 100%;
       background-color: var(--v0-surface);

apps/playground/src/content/intro.md

@@ -11,7 +11,7 @@ The editor ships a complete single-file component setup. Your `App.vue` runs ins
 - **UnoCSS runtime** with `presetWind4` (Tailwind v4 syntax) loaded automatically — no config needed
 - **`createThemePlugin`** installed with `light` and `dark` themes; every theme color is defined and reactive to theme switches
 
-> [!TIP] Theme colors work two ways: CSS custom properties (`var(--v0-primary)`) and UnoCSS utilities (`text-primary`, `bg-surface`, `border-divider`). Use the utilities — they're shorter and theme-aware by default.
+Theme colors work two ways: CSS custom properties (`var(--v0-primary)`) and UnoCSS utilities (`text-primary`, `bg-surface`, `border-divider`). Use the utilities — they're shorter and theme-aware by default.
 
 ## Composables
 

apps/playground/vite.config.ts

@@ -34,13 +34,29 @@ async function createMarkdownPlugin () {
   })
 
   return Markdown({
+    wrapperClasses: '',
     markdownItSetup (md) {
       md.use(
         fromHighlighter(highlighter as HighlighterGeneric<BundledLanguage, BundledTheme>, {
           themes: SHIKI_THEMES,
           defaultColor: false,
         }),
       )
+
+      // Wrap tables in scrollable container
+      md.renderer.rules.table_open = () => '<div class="overflow-x-auto mb-4"><table>'
+      md.renderer.rules.table_close = () => '</table></div>'
+
+      // Open external links in new window
+      md.renderer.rules.link_open = (tokens, index, options, _env, self) => {
+        const token = tokens[index]
+        const href = token.attrGet('href') || ''
+        if (/^https?:\/\//i.test(href)) {
+          token.attrSet('target', '_blank')
+          token.attrSet('rel', 'noopener noreferrer')
+        }
+        return self.renderToken(tokens, index, options)
+      }
     },
   })
 }