> For AI agents: the complete documentation index is available at https://rspress.rs/llms.txt, the full documentation bundle is available at https://rspress.rs/llms-full.txt.

# @rspress/plugin-twoslash 

[Source Code](https://github.com/web-infra-dev/rspress/tree/main/packages/plugin-twoslash)

Integrates [Twoslash](https://github.com/twoslashes/twoslash) with Rspress to generate rich TypeScript code blocks with type information.

## Installation


```sh [npm]
npm add @rspress/plugin-twoslash -D
```

```sh [yarn]
yarn add @rspress/plugin-twoslash -D
```

```sh [pnpm]
pnpm add @rspress/plugin-twoslash -D
```

```sh [bun]
bun add @rspress/plugin-twoslash -D
```

```sh [deno]
deno add npm:@rspress/plugin-twoslash -D
```

## Usage

### 1. Register the plugin

```ts twoslash title="rspress.config.ts"
import { defineConfig } from '@rspress/core';
import { pluginTwoslash } from '@rspress/plugin-twoslash';

export default defineConfig({
  plugins: [pluginTwoslash()],
});
```

### 2. Write code blocks with twoslash

Use special comments within TypeScript code blocks to enable Twoslash features.

For detailed usage, see the [Twoslash documentation](https://twoslash.netlify.app/guide/).

#### Extract type


**Rendered**

```ts twoslash
const hi = 'Hello';
const msg = `${hi}, world`;
//    ^?
```


**Syntax**

````mdx
```ts twoslash
const hi = 'Hello';
const msg = `${hi}, world`;
//    ^?
```
````


#### Completions


**Rendered**

```ts twoslash
// @noErrors
console.e;
//       ^|
```


**Syntax**

````mdx
```ts twoslash
// @noErrors
console.e;
//       ^|
```
````


#### Highlighting


**Rendered**

```ts twoslash
function add(a: number, b: number) {
  //     ^^^
  return a + b;
}
```


**Syntax**

````mdx
```ts twoslash
function add(a: number, b: number) {
  //     ^^^
  return a + b;
}
```
````


#### Error


**Rendered**

```ts twoslash
// @noErrorValidation
const str: string = 1;
```


**Syntax**

````mdx
```ts twoslash
// @noErrorValidation
const str: string = 1;
```
````


## Config

The plugin accepts an object with the following type:

```ts twoslash
import { TwoslashOptions } from 'twoslash';
// ---cut-before---
export interface PluginTwoslashOptions {
  explicitTrigger?: boolean;
  cache?: boolean;
  twoslashOptions?: TwoslashOptions;
}
```

### explicitTrigger

`explicitTrigger` is used to configure whether to explicitly trigger the Twoslash feature. Default is `true`.

- If set to `false`, all TypeScript code blocks will be processed by default.
- If set to `true`, only code blocks with the `twoslash` tag will be processed.

### cache

`cache` is used to cache the TypeScript language servers based on compiler options when calling [createTwoslasher](https://twoslash.netlify.app/refs/api#createtwoslasher). Default is `true`.

### twoslashOptions

`twoslashOptions` is used to pass options to Twoslash.
This allows you to customize the Twoslash behavior, including TypeScript compiler options and other settings.