feat: setup twoslash for codeblocks

.vitepress/config.ts

@@ -4,6 +4,7 @@ import { defineConfigWithTheme } from 'vitepress'
 import type { Config as ThemeConfig } from '@vue/theme'
 import baseConfig from '@vue/theme/config'
 import { headerPlugin } from './headerMdPlugin'
+import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 // import { textAdPlugin } from './textAdMdPlugin'
 
 const nav: ThemeConfig['nav'] = [
@@ -715,12 +716,16 @@ export default defineConfigWithTheme<ThemeConfig>({
     config(md) {
       md.use(headerPlugin)
       // .use(textAdPlugin)
-    }
+    },
+    codeTransformers: [
+      transformerTwoslash()
+    ]
   },
 
   vite: {
     define: {
-      __VUE_OPTIONS_API__: false
+      // Turn this back off after floating-vue migrated to Composition API
+      __VUE_OPTIONS_API__: true
     },
     optimizeDeps: {
       include: ['gsap', 'dynamics.js'],

.vitepress/theme/index.ts

@@ -1,6 +1,9 @@
+import '@shikijs/vitepress-twoslash/style.css'
 import './styles/index.css'
-import { h, App } from 'vue'
+
+import { h, App, Plugin } from 'vue'
 import { VPTheme } from '@vue/theme'
+import twoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import PreferenceSwitch from './components/PreferenceSwitch.vue'
 import {
   preferComposition,
@@ -22,6 +25,7 @@ export default Object.assign({}, VPTheme, {
     })
   },
   enhanceApp({ app }: { app: App }) {
+    app.use(twoslashFloatingVue as Plugin<[]>)
     app.provide('prefer-composition', preferComposition)
     app.provide('prefer-sfc', preferSFC)
     app.provide('filter-headers', filterHeadersByPreference)

.vitepress/theme/styles/index.css

@@ -1,5 +1,6 @@
 @import "./pages.css";
 @import "./badges.css";
+@import "./twoslash.css";
 @import "./options-boxes.css";
 @import "./inline-demo.css";
 @import "./utilities.css";

.vitepress/theme/styles/twoslash.css

@@ -0,0 +1,34 @@
+:root {
+  --twoslash-border-color: var(--vt-c-divider);
+  --twoslash-unmatched-color: var(--vt-c-text-2);
+}
+
+.twoslash-floating .twoslash-popup-container {
+  font-family: var(--vt-font-family-mono);
+  line-height: var(--vt-doc-code-line-height);
+  font-size: 14px;
+  color: white;
+}
+
+.twoslash-floating .twoslash-popup-docs {
+  font-family: var(--vt-font-family-base) !important;
+  font-size: 1em;
+}
+
+.twoslash-floating .twoslash-popup-docs-tag-name {
+  color: var(--vt-c-text-2) !important;
+}
+
+.v-popper--theme-twoslash .v-popper__inner {
+  background: #24292e;
+  color: white;
+  border-color: #8885;
+}
+
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  border-color: #8885;
+}
+
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  border-color: #24292e;
+}

package.json

@@ -13,19 +13,18 @@
     "@vue/repl": "^4.0.1",
     "@vue/theme": "^2.2.5",
     "dynamics.js": "^1.1.5",
-    "gsap": "^3.9.0",
-    "vitepress": "1.0.0-rc.33",
-    "vue": "^3.4.0"
+    "floating-vue": "^5.2.2",
+    "gsap": "^3.12.5",
+    "vitepress": "1.0.0-rc.44",
+    "vue": "^3.4.15"
   },
   "devDependencies": {
-    "@types/markdown-it": "^12.2.3",
-    "@types/node": "^20.10.1",
-    "terser": "^5.14.2"
+    "@shikijs/vitepress-twoslash": "^1.1.7",
+    "@types/markdown-it": "^13.0.7",
+    "@types/node": "^20.11.5",
+    "terser": "^5.27.0"
   },
   "pnpm": {
-    "overrides": {
-      "@vitejs/plugin-vue": "5.0.0-beta.1"
-    },
     "peerDependencyRules": {
       "ignoreMissing": [
         "@algolia/client-search",