Skip to content
Get packs

Guide · Open source

How to use Prism: highlight code snippets on your website

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

Prism is a JavaScript syntax highlighting library. It takes code snippets and adds color to keywords, strings and other parts so they are easier to read. This guide is for web developers and documentation writers who want to show code on a page, and it explains what Prism is for, how to get the source and build it, and where it can be extended.

PrismPrismJS/prism · ★ 13.1k · MIT

Quick start

  1. 1Decide if Prism fits. Confirm you need a syntax highlighting library rather than an editor. Prism is for displaying readable code on pages.
  2. 2Get Prism from a package manager. Use a package manager as the README describes. The npm package is named prismjs.
  3. 3Read the extending docs. Open prismjs.com/extending.html to learn how Prism is designed to be extended.
  4. 4Install contributor dependencies. In a source checkout, run npm ci. The README advises against npm install for deterministic builds.
  5. 5Build Prism. Run npm run build to generate prism.js and the minified files.
  6. 6Register and rebuild custom additions. Add new languages or plugins to components.json, then rebuild with npm run build.

What Prism does and who it is for

Prism highlights code so readers can scan it more easily. Website authors and developers use it to display code in documentation and blogs. It is a spin-off of the Dabblet project and the README describes it as lightweight, robust, and elegant.

Prism is a highlighting library, not an editor. If you need a finished editing environment or IDE, it is the wrong tool.

  • Good fit: showing code snippets on a website
  • Good fit: documentation writers who need readable code blocks
  • Good fit: developers who want custom language definitions or plugins
  • Not a fit: anyone who needs an editor or IDE

Install Prism with a package manager

The README lists a package manager as the install method and does not list any prerequisites for using Prism. The npm package is published as prismjs, as linked from the README badge.

Prism's homepage is prismjs.com, where the download build page and documentation live.

Build Prism from source for contributing

If you want to work on Prism itself, the README gives two commands. Use npm ci rather than npm install, because the README says npm install can cause non-deterministic builds. Then run the build.

Do not edit prism.js. The README says it is generated automatically and is the version used by the Prism website. Make changes in the unminified files in the components/ folder instead.

  • Install dependencies: npm ci
  • Build Prism: npm run build
npm ci npm run build

Extend Prism with languages and plugins

Prism was designed to be extensible. The README points to the extending documentation on prismjs.com for creating a new language definition.

If you add a language definition or plugin, the README says to add it to components.json and rebuild with npm run build so it appears on the download build page. For new languages, add a few tests and an example in the examples/ folder. Contributors who add a language definition are responsible for bug reports about it.

  • Read the extending docs at prismjs.com/extending.html
  • Register new languages or plugins in components.json
  • Rebuild with npm run build
  • For new languages, add tests and an example in examples/

Check project status before you depend on it

The README contains an important notice: the maintainers are working on Prism v2 and will only accept security-relevant pull requests for now. Feature PRs will be accepted again once v2 is sufficiently advanced, and this will be announced on the Discussions page.

If your team needs new features soon, plan for that. Look at the comparable projects listed below before committing.

Compare Prism with similar highlighters

Comparable projects include highlight.js, Shiki and CodeMirror. Prism is a highlighting library, so CodeMirror, which is an editor component, is a different kind of tool. Choose based on whether you need only highlighting, and on how much you need to extend it.

The README also links to an explanation of why the author created another syntax highlighter, and a separate prism-themes repository for additional themes.

What people use it for

  • Showing code snippets in a developer blog
  • Adding readable code blocks to product or API documentation
  • Creating a custom language definition for an internal DSL
  • Writing a plugin that extends highlighting behaviour

Frequently asked questions

Is Prism free to use?

Prism is released under the MIT licence, as listed on its project page. Check the licence file in the repository for the full terms before you use it in a commercial project.

How do I install Prism?

The README lists a package manager as the install method, and the npm package is named prismjs. For contributing from source, run npm ci and then npm run build.

What are the requirements for Prism?

The project lists no prerequisites for general use. To contribute, the README says you need Node.js 10.x or later and npm 6.x or later. It also says Prism runs on almost any browser and Node.js version.

Why is Prism not accepting new features?

The maintainers are working on Prism v2 and, per the README, will only accept security-relevant pull requests until that work is sufficiently advanced. The team will announce when feature PRs open again.

What are the alternatives to Prism?

Comparable projects listed for Prism are highlight.js, Shiki and CodeMirror. CodeMirror is an editor component, so it suits editing use cases more than simple highlighting.

Why should I not edit prism.js directly?

The README says prism.js is the version used by the Prism website and is built automatically. Change the unminified files in the components/ folder instead, then run npm run build.

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

Prism suits web developers and documentation writers who need lightweight, extensible code highlighting on a page, under an MIT licence. Skip it if you need a full editor, or if you need new Prism features soon, since the project is currently accepting only security-relevant pull requests while Prism v2 is in progress. Consider highlight.js or Shiki if you want an alternative highlighter.

Install options & downloads