feat: 集成twoslash

docs/.vitepress/config.ts

@@ -2,6 +2,7 @@ import getNavs from "./configs/nav"
 import socialLinks from "./configs/socialLinks"
 import { defineConfig } from 'vitepress'
 import AutoSidebar from 'vite-plugin-vitepress-auto-sidebar';
+import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 
 export default defineConfig({
   //根据环境变量决定打包路径
@@ -19,6 +20,10 @@ export default defineConfig({
       dark: 'vitesse-dark',
     },
     lineNumbers: true,
+    codeTransformers: [
+      // @ts-ignore
+      transformerTwoslash() 
+    ]
   },
   head: [
     ['link', { rel: 'icon', href: '/zerdocs/favicon.ico' }],

docs/.vitepress/theme/index.ts

@@ -8,6 +8,8 @@ import mediumZoom from 'medium-zoom';
 import UnoCSSLayout from './UnoCSSLayout.vue'
 import DemoWrap from "./components/DemoWrap.vue";
 import ListProjects from "./components/ListProjects.vue";
+import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
+import '@shikijs/vitepress-twoslash/style.css'
 
 export default {
   ...Theme,
@@ -17,20 +19,24 @@ export default {
     // @ts-ignore
       new mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' });
     };
+    // @ts-ignore
     onMounted(() => {
       initZoom();
     });
+    // @ts-ignore
     watch(
       () => route.path,
+    // @ts-ignore
       () => nextTick(() => initZoom())
     );
   },
   Layout: () => {
     return h(UnoCSSLayout, null, { })
   },
-  enhanceApp(ctx) {
+  enhanceApp({app}) {
     // 注册全局组件
-    ctx.app.component("DemoWrap", DemoWrap);
-    ctx.app.component("ListProjects", ListProjects);
+    app.use(TwoslashFloatingVue) 
+    app.component("DemoWrap", DemoWrap);
+    app.component("ListProjects", ListProjects);
   },
 };

docs/Problem/VueProject/Vue.md

@@ -0,0 +1,29 @@
+```ts twoslash
+console.log('hello')
+```
+
+```vue twoslash
+<script setup>
+import { onMounted, ref } from 'vue'
+
+// reactive state
+const count = ref(0)
+//             ^?
+
+// functions that mutate state and trigger updates
+function increment() {
+  count.value++
+}
+
+// lifecycle hooks
+onMounted(() => {
+  console.log(`The initial count is ${count.value}.`)
+})
+</script>
+
+<template>
+  <button @click="increment">
+    Count is: {{ count }}
+  </button>
+</template>
+```

package.json

@@ -12,12 +12,14 @@
     "lintf": "eslint --fix ."
   },
   "dependencies": {
+    "client": "link:@shikijs/vitepress-twoslash/client",
     "medium-zoom": "^1.1.0",
     "vite-plugin-vitepress-auto-sidebar": "^1.6.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.22.2",
     "@iconify/json": "^2.2.227",
+    "@shikijs/vitepress-twoslash": "^1.10.3",
     "eslint": "^9.7.0",
     "eslint-plugin-format": "^0.1.2",
     "lint-staged": "^15.2.7",