VitePress 集成

VitePress 在底层使用了 Shiki，所以你不需要显式地集成。

VitePress 提供了一些 Shiki 的自定义选项，在 VitePress 文档上查看更多。

Twoslash

要在 Vitepress 中启用 TypeScript Twoslash (类型悬停显示)，可以使用我们提供的插件来快速开始，它借助 Floating Vue 在容器外显示具有样式的类型信息。

安装

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 中，安装 Vue 插件并通过 vitepress-plugin-twoslash/styles.css 导入 CSS。

// .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) 
  },
}

关于 style.css

方便起见，vitepress-plugin-twoslash/styles.css 包含了 floating-vue 和 shiki-twoslash/style-rich.css 中的样式，所以你只需要引入这一项。如果你使用的是自定义 floating-vue 样式，或者需要对样式进行更多控制，你可以将它展开成如下几项：

import '@shikijs/vitepress-twoslash/style.css'

// 等同于：
import '@shikijs/twoslash/style-rich.css'
import 'floating-vue/dist/style.css'
import '@shikijs/vitepress-twoslash/style-core.css'

现在，你可以在你的 Markdown 文件中使用 ts twoslash 来启用美观的类型悬停显示。

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

它会被渲染为：

console.log('hello')

Vue SFC

此外，这个插件集成了 twoslash-vue，所以你可以使用 vue twoslash 高亮 Vue SFC 块：

<script setup>
import { onMounted, ref } from 'vue'

// 响应式状态
const count = ref(0)

// 修改状态并出发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">
    Count is: {{ count }}
  </button>
</template>

File System Cache

To speed up the build process, you can enable the file system cache for the generated types, that shares across multiple builds. By default the cache is stored in the .vitepress/cache/twoslash along with other VitePress caches.

In your .vitepress/config.ts:

// .vitepress/config.ts
import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
import { createFileSystemTypesCache } from '@shikijs/vitepress-twoslash/cache-fs'
import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    codeTransformers: [
      transformerTwoslash({
        typesCache: createFileSystemTypesCache() 
      })
    ]
  }
})