feat: add twoslash js/ts highlight

.vitepress/config.js

@@ -6,6 +6,7 @@ import { nav } from './nav.js';
 import PanguPlugin from 'markdown-it-pangu'
 import { fileURLToPath, URL } from 'node:url'
 import VueMacros from 'unplugin-vue-macros/vite'
+import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 
 // https://vitepress.dev/reference/site-config
 export default withMermaid({
@@ -85,7 +86,10 @@ export default withMermaid({
     config: (md) => {
       md.use(PanguPlugin);
     },
-    math: true
+    math: true,
+    codeTransformers: [
+      transformerTwoslash() 
+    ]
   },
   sitemap: {
     hostname: 'https://hdu-cs.wiki'

.vitepress/theme/index.js

@@ -9,6 +9,8 @@ import Bilibili from '../../components/Bilibili.vue'
 import Parallax from '../../components/Parallax.vue'
 import './style.css'
 import './rainbow.css'
+import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
+import '@shikijs/vitepress-twoslash/style.css'
 
 let homePageStyle = undefined
 
@@ -21,6 +23,7 @@ export default {
     ctx.app.component('Download', Download)
     ctx.app.component('Bilibili', Bilibili)
     ctx.app.component('Parallax', Parallax)
+    ctx.app.use(TwoslashFloatingVue)
     if (typeof window === 'undefined')
       return
     watch(