What it does
Shiki is a syntax-highlighting library for JavaScript and TypeScript applications. It uses TextMate grammars and themes, the same engine used for VS Code syntax highlighting, to turn source text into styled HTML. It is often used for code blocks in documentation and static sites, and has integrations for Markdown tooling and frameworks. Shiki highlights code; it is not an editable code editor.
A typical first task is to take a code sample from documentation and render it with a language and theme. Install the shiki package, pass source text to the documented codeToHtml helper, and place the returned HTML in the page. Shiki's generated HTML includes inline styles for tokens, so a separate stylesheet is not needed for those colors.
The guide also covers themes, language grammars, framework integrations and performance. Choose only the languages and themes a project needs, and check how its bundler loads those assets. This approach works well for static documentation or code previews, but it does not provide editing, cursor behavior or a full editor surface. The repository's current branch identifies the v4 line and the official license is MIT.
Strengths
- TextMate grammars and themes provide language-aware highlighting without maintaining a separate regular-expression grammar for every language.
- The documented `codeToHtml` helper returns styled HTML that can be embedded in a documentation page.
- The project documents integrations for Markdown and several framework and editor ecosystems.
Watch out for
- Shiki renders highlighted output rather than providing an editable code editor.
- The application still needs to choose languages, themes and loading strategy for the code it renders.
Best for
- Rendering source examples in technical documentation or a static site.
- Adding syntax-highlighted code previews to a JavaScript or TypeScript application.
Sources
- Shiki installation and usage (Oct 26, 2026)
- shikijs/shiki official repository (Oct 26, 2026)
- Shiki MIT license (Oct 26, 2026)