vitepress 中 typescript 代码片段 hover 提示类型

2024-12-18

140 words

1 min

效果展示:

步骤:

安装 @shikijs/vitepress-twoslash:

npm i -D @shikijs/vitepress-twoslash

在你的 .vitepress/config.ts:

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

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

在 .vitepress/theme/index.ts:

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

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

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

现在可以在你的 Markdown 文件中使用 ts twoslash 来启用漂亮的类型悬停效果:

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

示例:

console.log("hello");