@rspress/plugin-twoslash

Integration of Twoslash's Rspress Plugin for automatically generating rich code blocks with type information.

Installation

npm
yarn
pnpm
bun
npm add @rspress/plugin-twoslash -D

Usage

1. Register the plugin

rspress.config.ts
import { 
function defineConfig(config: UserConfig): UserConfig
defineConfig
} from '@rspress/core';
import {
function pluginTwoslash(options?: PluginTwoslashOptions): RspressPlugin

Plugin to applies Twoslash transformations to code blocks.

pluginTwoslash
} from '@rspress/plugin-twoslash';
export default
function defineConfig(config: UserConfig): UserConfig
defineConfig
({
UserConfig<DefaultThemeConfig>.plugins?: RspressPlugin[] | undefined

Doc plugins

plugins
: [
function pluginTwoslash(options?: PluginTwoslashOptions): RspressPlugin

Plugin to applies Twoslash transformations to code blocks.

pluginTwoslash
()],
});

2. Write code blocks with twoslash

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

For more detailed usage, please refer to the Twoslash documentation.

Extract type

Rendered
Syntax
const 
const hi: "Hello"
hi
= 'Hello';
const
const msg: "Hello, world"
msg
= `${
const hi: "Hello"
hi
}, world`;

Completions

Rendered
Syntax
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
  • A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:

console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:

const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesource
console
.e
  • error
;

Highlighting

Rendered
Syntax
function 
function add(a: number, b: number): number
add
(
a: number
a
: number,
b: number
b
: number) {
return
a: number
a
+
b: number
b
;
}

Error

Rendered
Syntax
const str: string = 1;
Type 'number' is not assignable to type 'string'.

Config

The plugin accepts an object with the following type:

export interface PluginTwoslashOptions {
  
PluginTwoslashOptions.explicitTrigger?: boolean | undefined
explicitTrigger
?: boolean;
}

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.