Installing

Twoslash Features

Feature	Supported Status
JSDocs and Type Hover boxes	✅
Error Handling/Messages	✅
Type Extraction	✅
Code Completions	✅
Code Highlighting	✅
Code Cutting	✅
Callouts	✅
TSComiler Overrides	✅
Show Emitted Files	⛔️

Installation

Install the package with your favorite package manager

npm

npm i expressive-code-twoslash

pnpm

pnpm add expressive-code-twoslash

yarn

yarn add expressive-code-twoslash

Add to EC Config

Add ecTwoSlash to your Expressive Code plugin list

Astro

astro.config.mjs

import { defineConfig } from "astro/config";
import astroExpressiveCode from 'astro-expressive-code'
import ecTwoSlash from "expressive-code-twoslash";

// https://astro.build/config
export default defineConfig({
  integrations: [
    astroExpressiveCode({
      plugins: [ecTwoSlash()],
    }),
  ],
});

ec.config.mjs

import { defineEcConfig } from 'astro-expressive-code'
import ecTwoSlash from "expressive-code-twoslash";

export default defineEcConfig({
  plugins: [ecTwoSlash()],
});

Starlight

astro.config.mjs

import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import ecTwoSlash from "expressive-code-twoslash";

// https://astro.build/config
export default defineConfig({
  integrations: [
    starlight({
      title: "Starlight",
      expressiveCode: {
        plugins: [ecTwoSlash()],
      },
    }),
  ],
});

ec.config.mjs

import { defineEcConfig } from "@astrojs/starlight/expressive-code";
import ecTwoSlash from "expressive-code-twoslash";

export default defineEcConfig({
  plugins: [ecTwoSlash()],
});

Next.js

next.config.mjs

import rehypeExpressiveCode from 'rehype-expressive-code'
import ecTwoSlash from "expressive-code-twoslash";

/** @type {import('rehype-expressive-code').RehypeExpressiveCodeOptions} */
const rehypeExpressiveCodeOptions = {
  plugins: [ecTwoSlash()],
}

// Rest of your Next.js config

For more information on how to add to your Next.js config, see the Expressive Code documentation.

Config Options

Default config options shown.

ecTwoSlash({
    explicitTrigger: true,
    includeJsDoc: true,
    allowNonStandardJsDocTags: false,
    languages: ["ts", "tsx"],
    twoslashOptions: {},
})