Skip to content
Get packs

Guide · Open source

How to use Shiki: install and highlight code with npm

Updated · written with AI from the project's own documentation and checked against our catalogue data

Shiki is an open-source syntax highlighter written in TypeScript. It colors source code using the same kind of grammar files as the TextMate and VS Code editors, and it is published on npm as the package shiki. This guide shows what it is for, how to install it with npm, and what to check before you use it on a documentation site or blog.

Shikishikijs/shiki · ★ 13.9k · MIT

Quick start

  1. 1Check prerequisites. Confirm that Node.js and npm are installed in your project environment.
  2. 2Install the package. Run npm install shiki in your project folder.
  3. 3Read the documentation. Open shiki.style to find the usage guide for the version you installed.
  4. 4Match your version. Check that the docs you follow match the branch version, since main is v4.x.
  5. 5Highlight your code samples. Use the shiki package in your site or blog build to color code samples, following the documentation.

What Shiki is and who it is for

Shiki colors source code so it is easier to read. The project describes itself as a beautiful syntax highlighter based on TextMate grammar that is accurate and powerful. Developers typically use it to show highlighted code in documentation sites, blogs, or web pages.

It fits best for developers building documentation or blog sites that show code samples, teams that want highlighting that matches TextMate or VS Code grammar rules, and TypeScript or JavaScript projects that already use npm.

  • Good fit: documentation or blog sites with code samples
  • Good fit: teams that want TextMate or VS Code grammar matching
  • Not a fit: people who need to edit code, since Shiki is a highlighter, not an editor
  • Not a fit: projects that cannot use npm or JavaScript, since the README only documents the npm package
  • Not a fit: users looking for a standalone app, since the README does not describe one

Check the prerequisites before you install

Shiki is installed through a package manager. The prerequisites listed for it are Node.js and npm. If you already have a JavaScript or TypeScript project that uses npm, you have what you need.

  • Node.js
  • npm

Install the shiki npm package

Run the following command in your project folder to install the npm package.

npm install shiki

Understand the branches and versions

The main branch of the repository is currently at v4.x. Older branches are kept for v3, v2, v1 and v0, where v0 is described as the legacy version. Check which branch matches the documentation you are following before you copy any code.

  • main: v4.x
  • v3, v2, v1: earlier maintained branches listed in the README
  • v0: legacy version

Where to find full usage documentation

The README is short and links to the project documentation site at shiki.style. Use that site for the detailed API and usage guidance, since this README excerpt does not include code examples for highlighting.

  • Project documentation: https://shiki.style
  • Source and issues: the shikijs/shiki repository on GitHub

How Shiki compares with other highlighters

Shiki is often compared with Prism, highlight.js, and Highlightjs-style highlighters such as Expressive Code. Its distinguishing point in the README is grammar compatibility with TextMate and VS Code. Compare them on the features your project needs before choosing.

  • Shiki: TextMate-based grammars, same kind used by VS Code
  • Prism and highlight.js: other widely used highlighters
  • Expressive Code: a Highlightjs-style option

What people use it for

  • Showing highlighted code samples in a documentation site
  • Adding colored code blocks to a blog built with JavaScript or TypeScript
  • Displaying code in web pages where TextMate or VS Code style highlighting is wanted

Frequently asked questions

Is Shiki free to use?

Yes. Shiki is released under the MIT licence, as shown in the repository's LICENSE link. You can read the licence file to confirm the terms.

What do I need to install Shiki?

The listed prerequisites are Node.js and npm. Install the package with npm install shiki.

How do I install Shiki?

Run npm install shiki in your project folder. The README documents this npm package as the way to install it.

Is Shiki an editor?

No. The README describes Shiki as a syntax highlighter that colors code. It does not describe an editor.

What are alternatives to Shiki?

Commonly compared options are Prism, highlight.js, and Highlightjs-style highlighters such as Expressive Code. Pick based on the grammar and features your project needs.

Can I use Shiki without JavaScript or npm?

The README only documents the npm package. If your project cannot use npm or JavaScript, Shiki's README does not describe another way to use it.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Shiki suits developers building documentation or blog sites in a TypeScript or JavaScript project who want highlighting that follows TextMate or VS Code grammar rules. It is not the right choice if you need a code editor, a standalone app, or a project that cannot use npm, in which case consider the other highlighters listed above.

Install options & downloads