Skip to content

VitePress Integration

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

VitePress provides a few options for customizing Shiki. 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 versionNPM downloadsGitHub

Setup

bash
npm i -D @shikijs/vitepress-twoslash

In your .vitepress/config.ts:

ts
// .vitepress/config.ts
import { 
transformerTwoslash
} from '@shikijs/vitepress-twoslash'
import {
defineConfig
} from 'vitepress'
export default
defineConfig
({
markdown
: {
codeTransformers
: [
transformerTwoslash
()
] } })

And then in your .vitepress/theme/index.ts, install the Vue plugin and import the css with @shikijs/vitepress-twoslash/styles.css.

ts
import type { EnhanceAppContext } from 'vitepress'
// .vitepress/theme/index.ts
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
)
}, }
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:

ts
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.

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

It will be rendered as:

ts
console
.
log
('hello')


Vue Single File Component

In addition, this plugin also integrated twoslash-vue for you, so that you can also highlight Vue SFC blocks with vue twoslash:

vue
<script setup>
import { 
onMounted
,
ref
} from 'vue'
// reactive state const
count
=
ref
(0)
// functions that mutate state and trigger updates function
increment
() {
count
.
value
++
} // lifecycle hooks
onMounted
(() => {
console
.
log
(`The initial count is ${
count
.
value
}.`)
}) </script> <template> <
button
@
click
="
increment
">
Count is: {{
count
}}
</
button
>
</template>

Released under the MIT License.