# Config | Toshiki's Note
You can configure Twoslash to change code example output.
Author: Anda Toshiki
Keywords: Toshiki, Anda Toshiki, andatoshiki, GitHub, GitHub action, Vitepress, Vite, Notebook, Knowledge base, Programming, Programming Notes, Academic, Personal, Notebook, Productivity, Journal, Note-taking, Markdown, Notepad, Organization, Tutorial

Skip to content

####

# Config ​

Author:Anda Toshiki
Updated:a minute 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        },    }))

1

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

1
2
3
4
5
6
7

### `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,
            },
        })
    )

1
2
3
4
5
6
7

### `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,
            },
        })
    )

1
2
3
4
5
6
7

### `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,
            },
        })
    )

1
2
3
4
5
6
7

### `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,
            },
        })
    )

1
2
3
4
5
6
7

### `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,
            },
        })
    )

1
2
3
4
5
6
7