Lets you run Shiki Twoslash on arbitrary files via the terminal.
npm install twoslash-cliLets you run Shiki Twoslash on arbitrary files via the terminal.
``sh`
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.
`sh`
twoslash samples/*.ts renders
> Take a bunch of .ts files and render them to HTML, but also render the source highlighted too.
`sh`
twoslash --sourceAlso samples/*.ts renders
> Render a few markdown files to HTML.
`sh`
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.
`sh`
twoslash --samples pages/example_files.md renders
> Lint all the code samples in bunch of Markdown files.
`sh`
twoslash --lint pages/example_files.md
> Create TSX files with a named Code export for a set of .ts files.
`sh`
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:
`mdHello
`ts twoslash`
const a = 123
const b = 3456
This one would do the same for a TypeScript file:
`ts`
// twoslash: { themes: ["nord", "light-plus"] }
const a = 123
const b = 3456
and you can set up the codefence settings like:
`ts``
// twoslash: { themes: ["nord", "light-plus"] }
// highlight: {1}
const a = 123
const b = 3456