This is just a demo for test.The source page is here.

---

VitePress Integration

// .vitepress/theme/index.ts
import Theme from "vitepress/theme";
import TwoslashFloatingVue from "@shikijs/vitepress-twoslash/client";
import "@shikijs/vitepress-twoslash/style.css";
import type { EnhanceAppContext } from "vitepress";

export default {
  extends: Theme,
  enhanceApp({ app }: EnhanceAppContext) {
    app.use(TwoslashFloatingVue); 
  },
};

About style.css

For easier setup, @shikijs/vitepress-twoslash/styles.css bundles the styles from floating-vue and @shikijs/twoslash/style-rich.css so you only need a single entry. If you are using a custom floating-vue style or want to have more control of the styles, you can expand them as:

import "@shikijs/vitepress-twoslash/style.css";

// Equivalent to:
import "@shikijs/twoslash/style-rich.css";
import "floating-vue/dist/style.css";
import "@shikijs/vitepress-twoslash/style-core.css";

That's it, you can now use ts twoslash in your markdown files to enable the beautiful type hover.

```ts twoslash
console.log("hello");
//      ^?
```

It will be rendered as:

console.log("hello");