prismjs/prism

★ 12,974JavaScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((Prism))
    What it does
      Syntax highlighting
      Browser side only
      Lightweight
    How to use
      Add script and CSS
      Mark code blocks
      Auto highlights
    Extends via
      Language grammars
      Visual themes
      Feature plugins
    Status
      Stable release
      v2 in progress

mindmap root((Prism)) What it does Syntax highlighting Browser side only Lightweight How to use Add script and CSS Mark code blocks Auto highlights Extends via Language grammars Visual themes Feature plugins Status Stable release v2 in progress

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add color-coded syntax highlighting to code samples on a documentation site or developer blog by including two files and marking code blocks with a CSS class.

USE CASE 2

Extend Prism with a plugin to show line numbers, a copy-to-clipboard button, or file name labels above code blocks.

USE CASE 3

Contribute support for a new programming language to Prism by writing a grammar definition file.

Tech stack

JavaScriptCSSnpm

Getting it running

Difficulty · easy Time to first run · 5min

Only security fixes are accepted into the current version, Prism v2 is under active development and will introduce a new API.

In plain English

Prism is a JavaScript library that adds color-coded syntax highlighting to code samples shown on web pages. When you visit a site where programming code appears with different colors for keywords, strings, and comments, there is a reasonable chance Prism is doing that work. The library is small by design and runs entirely in the browser without requiring anything on the server side. It supports a wide range of programming languages, from HTML and CSS to Python, Java, Bash, and dozens of others. To use it, a developer includes the Prism script and a CSS theme file on their page, then marks code blocks with a class that names the language. Prism finds those blocks and applies the highlighting automatically. Themes control the visual appearance, and a separate repository called prism-themes holds additional options beyond the built-in defaults. The project started as a spin-off from a web tool called Dabblet. It has since been adopted broadly across documentation sites, developer blogs, and web-based tools. Because it was designed to be extensible, contributors can add support for new programming languages and build plugins that add features like line numbers, copy buttons, and file labels. The README notes that the project team is currently building a new major version called Prism v2 and is only accepting security-related contributions to the existing version until that work is complete. The current release is stable and available on npm under the package name prismjs. It works across virtually all modern browsers.

Copy-paste prompts

Prompt 1

I want to add syntax highlighting to code blocks on my static HTML site using Prism. Give me the minimal setup with a dark theme and support for JavaScript and Python.

Prompt 2

I am using Prism in a React app where code blocks are rendered dynamically after page load. How do I make Prism re-highlight them?

Prompt 3

I need Prism to highlight a custom configuration language that is not in the default set. Help me write a simple grammar definition for it.

Prompt 4

I want to add a copy-to-clipboard button to every Prism code block on my site. What is the simplest way to do that using the existing plugin system?

Prompt 5

My Prism highlighting is not working for Python inside a Next.js app. Here is my setup, help me debug why it is not applying.

Open on GitHub → Explain another repo

← prismjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.