# VitePress Twoslash: VitePress Plugin for Shiki Twoslash
Static code examples for VitePress using Shiki Twoslash.
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

####

# @andatoshiki/vitepress-plugin-shiki-twoslash ​

Author:Anda Toshiki
Updated:a minute ago
Words:437
Reading:2 min

> Static code examples for VitePress using Shiki Twoslash — powered by the syntax engine of Visual Studio Code and the TypeScript compiler.

## Overview ​

Try moving your cursor into the code block below:

ts

    ts// Removes 'readonly' attributes from a type's propertiestype CreateMutable<Type> = {    -readonly [Property in keyof Type]: Type[Property]} type LockedAccount = {    readonly id: string    readonly name: string} type UnlockedAccount = CreateMutable<LockedAccount>

    ts// Removes 'readonly' attributes from a type's propertiestype CreateMutable<Type> = {    -readonly [Property in keyof Type]: Type[Property]} type LockedAccount = {    readonly id: string    readonly name: string} type UnlockedAccount = CreateMutable<LockedAccount>

1

Pretty neat, right? To some extent, anything your editor can show you about code, Twoslash can show. For example, here is the real auto-complete for a VitePress config:

ts

    tsimport { defineConfig } from 'vitepress' export default defineConfig({    ti,      titletitleTemplate})

    tsimport { defineConfig } from 'vitepress' export default defineConfig({    ti,      titletitleTemplate})

1

The name Twoslash refers to specially formatted comments (e.g. `// ^?`) which can be used to set up your environment, like compiler flags or separate input files. It couldn't be easier to set up and start creating incredible code examples!

## Install ​

Install `@andatoshiki/vitepress-plugin-shiki-twoslash` (requires `vitepress@>=1.0.0-alpha.61`).

pnpmnpmyarn
bash

    pnpm add @andatoshiki/vitepress-plugin-shiki-twoslash

    pnpm add @andatoshiki/vitepress-plugin-shiki-twoslash

1
bash

    npm i @andatoshiki/vitepress-plugin-shiki-twoslash

    npm i @andatoshiki/vitepress-plugin-shiki-twoslash

1
bash

    yarn add @andatoshiki/vitepress-plugin-shiki-twoslash

    yarn add @andatoshiki/vitepress-plugin-shiki-twoslash

1

WARNING

Until `shiki-twoslash` uses the same version of `shiki` as VitePress, you must override the following packages' `shiki` versions for syntax highlighting to look the same.

json

    {
        "pnpm": {
            "overrides": {
                "remark-shiki-twoslash>shiki": "^0.14.1",
                "shiki-twoslash>shiki": "^0.14.1"
            }
        }
    }

    {
        "pnpm": {
            "overrides": {
                "remark-shiki-twoslash>shiki": "^0.14.1",
                "shiki-twoslash>shiki": "^0.14.1"
            }
        }
    }

1
2
3
4
5
6
7
8

Tracked in an upstream issue: https://github.com/shikijs/twoslash/issues/180

## Configure ​

First, wrap your VitePress config file with the `withTwoslash` wrapper.

ts

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

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

1

Then, import `@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css` into your theme.

ts

    ts// .vitepress/theme/index.tsimport defaultTheme from 'vitepress/theme'import '@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css' export default defaultTheme

    ts// .vitepress/theme/index.tsimport defaultTheme from 'vitepress/theme'import '@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css' export default defaultTheme

1

TIP

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

## Add Twoslash ​

Finally, add the `twoslash` attribute to markdown fenced code blocks.

md

    ```ts twoslash
    // Removes 'readonly' attributes from a type's properties
    type CreateMutable<Type> = {
        -readonly [Property in keyof Type]: Type[Property]
    }

    type LockedAccount = {
        readonly id: string
        readonly name: string
    }

    type UnlockedAccount = CreateMutable<LockedAccount>
    //   ^?
    ```

    ```ts twoslash
    // Removes 'readonly' attributes from a type's properties
    type CreateMutable<Type> = {
        -readonly [Property in keyof Type]: Type[Property]
    }

    type LockedAccount = {
        readonly id: string
        readonly name: string
    }

    type UnlockedAccount = CreateMutable<LockedAccount>
    //   ^?
    ```

1
2
3
4
5
6
7
8
9
10
11
12
13
14

And your code blocks will be twoslashified!

ts

    ts// Removes 'readonly' attributes from a type's propertiestype CreateMutable<Type> = {    -readonly [Property in keyof Type]: Type[Property]} type LockedAccount = {    readonly id: string    readonly name: string} type UnlockedAccount = CreateMutable<LockedAccount>           type UnlockedAccount = {
        id: string;
        name: string;
    }

    ts// Removes 'readonly' attributes from a type's propertiestype CreateMutable<Type> = {    -readonly [Property in keyof Type]: Type[Property]} type LockedAccount = {    readonly id: string    readonly name: string} type UnlockedAccount = CreateMutable<LockedAccount>           type UnlockedAccount = {
        id: string;
        name: string;
    }

1
2
3
4