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

VitePress Integration

VitePress uses Shikiji under the hood, so you don't need explicit integration.

VitePress provides a few options for customizing Shikiji. Learn more about them in the VitePress documentation.

TwoSlash

To enable TypeScript TwoSlash(type hover on code snippets) in VitePress, we provide a VitePress plugin for easy setup. Pre-styled, with Floating Vue to display the type information out side of the code container.

npm i -D vitepress-plugin-twoslash

In your .vitepress/config.ts:

// .vitepress/config.ts
import { defineConfig } from "vitepress";
import { transformerTwoslash } from "vitepress-plugin-twoslash"; 

export default defineConfig({
  markdown: {
    codeTransformers: [
      transformerTwoslash(), 
    ],
  },
});

And then in your .vitepress/theme/index.ts:

// .vitepress/theme/index.ts
import Theme from "vitepress/theme";
import TwoSlashFloatingVue from "vitepress-plugin-twoslash/client"; 
import "./custom-style.css";
import type { EnhanceAppContext } from "vitepress";

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

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");