orta / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible statically generated code samples.

See the user-facing docs at: https://shikijs.github.io/twoslash/

This Repo

The majority of this repo uses pnpm, the rest yarn. There are four main areas of interest:

• packages, the shiki meets twoslash plugins for markdown renderers and static site generators
• site, the docs micro-site
• examples, example static site generator projects which use the plugins
• extensions, right now, just the vscode extension for twoslash code samples

Packages

The site extensions and examples are excluded from the workspace. To work on those, cd to their folders and read instructions.

Otherwise:

git clone https://github.com/shikijs/twoslash
cd twoslash

pnpm i
pnpm bootstrap
pnpm test

Then see the contributing for advice and the vision file for the long-term perspective.

Plugins

• docusaurus-preset-shiki-twoslash - for Docusaurus
• eleventy-plugin-shiki-twoslash - For 11ty
• gatsby-remark-shiki-twoslash - For Gatsby
• hexo-shiki-twoslash - For Hexo
• vuepress-plugin-shiki-twoslash - For VuePress

Markdown Renderers

• markdown-it-shiki-twoslash - For Markdown-It
• remark-shiki-twoslash - For Remark

Root Abstractions

• shiki-twoslash - Provides all the building blocks for above
• twoslash-cli - A CLI for converting md/ts/tsx/js/jsx files to HTML