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 {  } from '@shikijs/vitepress-twoslash'
import {  } from 'vitepress'

export default ({
  : {
    : [
      () 
    ]
  }
})

然后在你的 .vitepress/theme/index.ts 中，安装 Vue 插件并通过 vitepress-plugin-twoslash/styles.css 导入 CSS。

import type { EnhanceAppContext } from 'vitepress'
// .vitepress/theme/index.ts
import  from '@shikijs/vitepress-twoslash/client'
import  from 'vitepress/theme'

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

export default {
  : ,
  ({  }: EnhanceAppContext) {
    .() 
  },
}

关于 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')
//      ^?
```

它会被渲染为：

.('hello')

Vue SFC

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

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

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

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

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

<template>
  < @="">
    Count is: {{  }}
  </>
</template>