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(

CONTRIBUTING.md

@@ -39,7 +39,7 @@
 5. 代码块使用 ` ``` ` 包裹，并标注常见的语言标识符，如 ` ```python ` ，其作用是使代码正常高亮。
 ::: details 代码高亮支持的语言
 
-```ts
+```ts twoslash
 export type Lang =
   | 'abap'
   | 'actionscript-3'

package.json

@@ -1,4 +1,5 @@
 {
+  "type": "module",
   "scripts": {
     "docs:dev": "cross-env NODE_OPTIONS='--max-old-space-size=8192' vitepress dev --host",
     "docs:build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' vitepress build",
@@ -23,6 +24,7 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.0.5",
     "@semantic-release/release-notes-generator": "^13.0.0",
+    "@shikijs/vitepress-twoslash": "^1.6.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "cross-env": "^7.0.3",
     "markdown-it-mathjax3": "^4.3.2",