Toshiki's Note

Appearance

Config ​

Author:Anda Toshiki
Updated:3 months ago
Words:248
Reading:1 min

Overview ​

You can configure VitePress Twoslash using the twoslash property added to defineConfig.

ts
ts
// .vitepress/config.[ext]
import { defineConfig } from 'vitepress'
import { withTwoslash, TwoslashConfigSettings } from '@andatoshiki/vitepress-plugin-shiki-twoslash'
 
export default withTwoslash(
    defineConfig({
        twoslash: {
            // Your VitePress Twoslash options
        },
    })
)
ts
// .vitepress/config.[ext]
import { defineConfig } from 'vitepress'
import { withTwoslash, TwoslashConfigSettings } from '@andatoshiki/vitepress-plugin-shiki-twoslash'
 
export default withTwoslash(
    defineConfig({
        twoslash: {
            // Your VitePress Twoslash options
        },
    })
)

INFO

In addition to the below config options, VitePress Twoslash also supports all shiki HighlighterOptions and @typescript/twoslash TwoSlashOptions.

Options ​

addTryButton ​

A way to turn on the try buttons seen on the TS website.

  • Type: boolean
  • Default: false
ts
export default withTwoslash(
    defineConfig({
        twoslash: {
            addTryButton: true, 
        },
    })
)
export default withTwoslash(
    defineConfig({
        twoslash: {
            addTryButton: true, 
        },
    })
)

alwayRaiseForTwoslashExceptions ​

Instead of showing twoslash exceptions inline, throw the entire process like it will on CI.

  • Type: boolean
  • Default: false
ts
export default withTwoslash(
    defineConfig({
        twoslash: {
            alwayRaiseForTwoslashExceptions: true, 
        },
    })
)
export default withTwoslash(
    defineConfig({
        twoslash: {
            alwayRaiseForTwoslashExceptions: true, 
        },
    })
)

disableImplicitReactImport ​

A way to disable implicit React imports on tsx/jsx language codeblocks

  • Type: boolean
  • Default: false
ts
export default withTwoslash(
    defineConfig({
        twoslash: {
            disableImplicitReactImport: true, 
        },
    })
)
export default withTwoslash(
    defineConfig({
        twoslash: {
            disableImplicitReactImport: true, 
        },
    })
)

includeJSDocInHover ​

Include JSDoc comments in the hovers.

  • Type: boolean
  • Default: false
ts
export default withTwoslash(
    defineConfig({
        twoslash: {
            includeJSDocInHover: true, 
        },
    })
)
export default withTwoslash(
    defineConfig({
        twoslash: {
            includeJSDocInHover: true, 
        },
    })
)

ignoreCodeblocksWithCodefenceMeta ​

Ignore transforming certain code blocks.

  • Type: boolean
  • Default: false
ts
export default withTwoslash(
    defineConfig({
        twoslash: {
            ignoreCodeblocksWithCodefenceMeta: true, 
        },
    })
)
export default withTwoslash(
    defineConfig({
        twoslash: {
            ignoreCodeblocksWithCodefenceMeta: true, 
        },
    })
)

wrapFragments ​

A way to add a div wrapper for multi-theme outputs.

  • Type: boolean
  • Default: false
ts
export default withTwoslash(
    defineConfig({
        twoslash: {
            wrapFragments: true, 
        },
    })
)
export default withTwoslash(
    defineConfig({
        twoslash: {
            wrapFragments: true, 
        },
    })
)