twoslash-cli

Shiki Twoslash CLI

Lets you run Shiki Twoslash on arbitrary files via the terminal.

npm install -g twoslash-cli

❯ node twoslash packages/twoslash-cli/examples packages/twoslash-cli/examples/render
Twoslashifying 5 files:

  - packages/twoslash-cli/examples/another.js -> packages/twoslash-cli/examples/render/another.js.html 
  - packages/twoslash-cli/examples/basic.md -> packages/twoslash-cli/examples/render/basic.html 
  - packages/twoslash-cli/examples/file-with-settings.md -> packages/twoslash-cli/examples/render/file-with-settings.html 
  - packages/twoslash-cli/examples/single-with-settings.ts -> packages/twoslash-cli/examples/render/single-with-settings.ts.html 
  - packages/twoslash-cli/examples/single.ts -> packages/twoslash-cli/examples/render/single.ts.html 

Examples

Take a bunch of .ts files and render them to HTML.

twoslash samples/*.ts renders 

Take a bunch of .ts files and render them to HTML, but also render the source highlighted too.

twoslash --sourceAlso samples/*.ts renders 

Render a few markdown files to HTML.

twoslash pages/one.md  pages/two.md build 

Take a markdown file and split out each code sample into its own HTML. They get an index for a filename.

twoslash --samples pages/example_files.md renders

Lint all the code samples in bunch of Markdown files.

twoslash --lint pages/example_files.md

Create TSX files with a named Code export for a set of .ts files.

twoslash --reactAlso samples/*.ts components/twoslash 

Configuring Shiki Twoslash

You can specify the TwoSlashOptions settings for a render inside a HTML comment at the start of the file:

This markdown file would correctly render the code sample twice with each theme:

<!-- twoslash: { themes: ["nord", "light-plus"]  } -->
## Hello

```ts twoslash
const a = 123
const b = 3456

This one would do the same for a TypeScript file:

// twoslash: { themes: ["nord", "light-plus"] }
const a = 123
const b = 3456

and you can set up the codefence settings like:

// twoslash: { themes: ["nord", "light-plus"] }
// highlight: {1}
const a = 123
const b = 3456