Prism — Lightweight Syntax Highlighting for the Web

Introduction

Prism is a lightweight and extensible syntax highlighting library for the web. It automatically highlights code blocks based on the language class attribute on your HTML elements. It powers syntax highlighting on many documentation sites and developer platforms.

What Prism Does

• Highlights code syntax in over 300 programming and markup languages
• Applies token-based styling through CSS themes that can be swapped independently
• Extends functionality through a plugin system for line numbers, copy buttons, and more
• Runs automatically on page load or can be triggered manually via its API
• Supports both browser and Node.js environments for server-side rendering

Architecture Overview

Prism tokenizes source code strings using language-specific grammar definitions composed of regular expressions. Each grammar is a plain JavaScript object mapping token names to regex patterns. The tokenizer produces a flat array of Token objects which a renderer converts into styled HTML span elements. Grammars can extend other grammars, so TypeScript reuses and extends the JavaScript definition.

Self-Hosting & Configuration

• Download a custom build from the Prism website or install via npm
• Include the CSS theme file and the JavaScript bundle in your HTML
• Mark code blocks with class="language-xxx" where xxx is the language identifier
• Call Prism.highlightAll() to re-highlight after dynamic content updates
• Add plugins by including their JS and CSS files alongside the core bundle

Key Features

• Supports 300+ languages with grammars that extend each other to avoid duplication
• Tiny core under 2 KB minified; languages and plugins load on demand
• 8 built-in themes and dozens of community themes available
• Plugin ecosystem including line numbers, autolinker, toolbar, and diff highlighting
• Works on any website with semantic HTML using standard pre and code elements

Comparison with Similar Tools

• Highlight.js — auto-detects language without class attributes; larger default bundle and fewer plugins
• Shiki — uses TextMate grammars for VS Code-accurate highlighting; heavier and requires build step
• Rouge — Ruby-based highlighter used by Jekyll; not usable in the browser
• CodeMirror — full code editor with highlighting; overkill for read-only display

FAQ

Q: Does Prism support TypeScript? A: Yes, TypeScript highlighting is included and extends the JavaScript grammar.

Q: Can I add a language that is not bundled? A: Yes, you can define a custom grammar object and register it with Prism.languages.

Q: Does Prism work with React or Vue? A: Yes, community wrappers exist, or you can call Prism.highlight() manually in lifecycle hooks.

Q: How do I enable line numbers? A: Include the line-numbers plugin and add the class line-numbers to the pre element.

Sources

• https://github.com/PrismJS/prism
• https://prismjs.com/