import{_ as a,c as o,o as n,R as e,z as s,a as l}from"./chunks/framework.ade46834.js";const P=JSON.parse('{"title":"VitePress Twoslash: VitePress Plugin for Shiki Twoslash","titleTemplate":false,"description":"Static code examples for VitePress using Shiki Twoslash.","frontmatter":{"description":"Static code examples for VitePress using Shiki Twoslash.","title":"VitePress Twoslash: VitePress Plugin for Shiki Twoslash","titleTemplate":false,"keywords":["getting-started","intro"]},"headers":[],"relativePath":"application/vitepress-plugin-shiki-twoslash/index.md","filePath":"application/vitepress-plugin-shiki-twoslash/index.md","lastUpdated":1694660273000}'),p={name:"application/vitepress-plugin-shiki-twoslash/index.md"},t=e('

@andatoshiki/vitepress-plugin-shiki-twoslash ​

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:

',4),r=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// Removes 'readonly' attributes from a type's properties")]),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#839496"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#839496"}},"> "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"-"),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}}," ["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"in"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"keyof"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#839496"}},"]"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#839496"}},"["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#839496"}},"]")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = { readonly id: string; readonly name: string; }`},"LockedAccount")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}},[l(),s("data-lsp",{lsp:"(property) id: string"},"id")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}},[l(),s("data-lsp",{lsp:"(property) name: string"},"name")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type UnlockedAccount = { id: string; name: string; }`},"UnlockedAccount")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#839496"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = { readonly id: string; readonly name: string; }`},"LockedAccount")]),s("span",{style:{color:"#839496"}},">")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// Removes 'readonly' attributes from a type's properties")]),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#657B83"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#657B83"}},"> "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"-"),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}}," ["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"in"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"keyof"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#657B83"}},"]"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#657B83"}},"["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#657B83"}},"]")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = { readonly id: string; readonly name: string; }`},"LockedAccount")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}},[l(),s("data-lsp",{lsp:"(property) id: string"},"id")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}},[l(),s("data-lsp",{lsp:"(property) name: string"},"name")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type UnlockedAccount = { id: string; name: string; }`},"UnlockedAccount")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#657B83"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = { readonly id: string; readonly name: string; }`},"LockedAccount")]),s("span",{style:{color:"#657B83"}},">")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),c=s("p",null,"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:",-1),i=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#839496"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#839496"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(property) ti: any"},"ti")]),s("span",{style:{color:"#839496"}},",")]),s("div",{class:"meta-line"},[l("      "),s("span",{class:"inline-completions"},[s("ul",{class:"dropdown"},[s("li",{class:""},[s("span",null,[s("span",{class:"result-found"},"ti"),l("tle")])]),s("li",{class:""},[s("span",null,[s("span",{class:"result-found"},"ti"),l("tleTemplate")])])])])]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"})")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#657B83"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#657B83"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(property) ti: any"},"ti")]),s("span",{style:{color:"#657B83"}},",")]),s("div",{class:"meta-line"},[l("      "),s("span",{class:"inline-completions"},[s("ul",{class:"dropdown"},[s("li",{class:""},[s("span",null,[s("span",{class:"result-found"},"ti"),l("tle")])]),s("li",{class:""},[s("span",null,[s("span",{class:"result-found"},"ti"),l("tleTemplate")])])])])]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"})")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),y=e(`

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

bash
pnpm add @andatoshiki/vitepress-plugin-shiki-twoslash
pnpm add @andatoshiki/vitepress-plugin-shiki-twoslash
bash
npm i @andatoshiki/vitepress-plugin-shiki-twoslash
npm i @andatoshiki/vitepress-plugin-shiki-twoslash
bash
yarn add @andatoshiki/vitepress-plugin-shiki-twoslash
yarn add @andatoshiki/vitepress-plugin-shiki-twoslash

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"
        }
    }
}

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

Configure ​

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

`,7),d=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// .vitepress/config.[ext]")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#839496"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress'")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function withTwoslash(config: UserConfig): Promise> import withTwoslash`},"withTwoslash")]),s("span",{style:{color:"#839496"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'@andatoshiki/vitepress-plugin-shiki-twoslash'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) withTwoslash(config: UserConfig): Promise> import withTwoslash`},"withTwoslash")]),s("span",{style:{color:"#839496"}},"(")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#839496"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#586E75"}},"// Your VitePress config")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," })")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},")")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// .vitepress/config.[ext]")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#657B83"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress'")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function withTwoslash(config: UserConfig): Promise> import withTwoslash`},"withTwoslash")]),s("span",{style:{color:"#657B83"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'@andatoshiki/vitepress-plugin-shiki-twoslash'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) withTwoslash(config: UserConfig): Promise> import withTwoslash`},"withTwoslash")]),s("span",{style:{color:"#657B83"}},"(")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig): UserConfig import defineConfig`},"defineConfig")]),s("span",{style:{color:"#657B83"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#93A1A1"}},"// Your VitePress config")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," })")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},")")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),u=s("p",null,[l("Then, import "),s("code",null,"@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css"),l(" into your theme.")],-1),h=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// .vitepress/theme/index.ts")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const defaultTheme: { Layout: DefineComponent; NotFound: DefineComponent; enhanceApp: (ctx: EnhanceAppContext) => void; } import defaultTheme`},"defaultTheme")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress/theme'")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const defaultTheme: { Layout: DefineComponent; NotFound: DefineComponent; enhanceApp: (ctx: EnhanceAppContext) => void; } import defaultTheme`},"defaultTheme")])])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// .vitepress/theme/index.ts")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const defaultTheme: { Layout: DefineComponent; NotFound: DefineComponent; enhanceApp: (ctx: EnhanceAppContext) => void; } import defaultTheme`},"defaultTheme")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress/theme'")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const defaultTheme: { Layout: DefineComponent; NotFound: DefineComponent; enhanceApp: (ctx: EnhanceAppContext) => void; } import defaultTheme`},"defaultTheme")])])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),g=e(`

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>
//   ^?
\`\`\`

And your code blocks will be twoslashified!

`,5),B=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// Removes 'readonly' attributes from a type's properties")]),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#839496"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#839496"}},"> "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"-"),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}}," ["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"in"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"keyof"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#839496"}},"]"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#839496"}},"["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#839496"}},"]")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = { readonly id: string; readonly name: string; }`},"LockedAccount")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}},[l(),s("data-lsp",{lsp:"(property) id: string"},"id")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}},[l(),s("data-lsp",{lsp:"(property) name: string"},"name")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type UnlockedAccount = { id: string; name: string; }`,style:{"border-bottom":"solid 2px lightgrey"}},"UnlockedAccount")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#839496"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = { readonly id: string; readonly name: string; }`},"LockedAccount")]),s("span",{style:{color:"#839496"}},">")]),s("div",{class:"meta-line"},[s("span",{class:"popover-prefix"}," "),s("span",{class:"popover"},[s("div",{class:"arrow"}),l(`type UnlockedAccount = { id: string; name: string; }`)])])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// Removes 'readonly' attributes from a type's properties")]),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#657B83"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#657B83"}},"> "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"-"),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}}," ["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"in"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"keyof"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#657B83"}},"]"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable"},"Type")]),s("span",{style:{color:"#657B83"}},"["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#657B83"}},"]")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = { readonly id: string; readonly name: string; }`},"LockedAccount")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}},[l(),s("data-lsp",{lsp:"(property) id: string"},"id")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}},[l(),s("data-lsp",{lsp:"(property) name: string"},"name")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type UnlockedAccount = { id: string; name: string; }`,style:{"border-bottom":"solid 2px lightgrey"}},"UnlockedAccount")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#657B83"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = { readonly id: string; readonly name: string; }`},"LockedAccount")]),s("span",{style:{color:"#657B83"}},">")]),s("div",{class:"meta-line"},[s("span",{class:"popover-prefix"}," "),s("span",{class:"popover"},[s("div",{class:"arrow"}),l(`type UnlockedAccount = { id: string; name: string; }`)])])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br")])],-1),m=[t,r,c,i,y,d,u,h,g,B];function f(v,b,C,k,T,A){return n(),o("div",null,m)}const _=a(p,[["render",f]]);export{P as __pageData,_ as default};