# Prism.js — Lightweight Extensible Syntax Highlighter

> Prism.js is a small, fast syntax highlighting library used on documentation sites and blogs, supporting 300+ languages with a plugin-based architecture.

## Install

Save in your project root:

# Prism.js — Lightweight Extensible Syntax Highlighter

## Quick Use
```html
<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" rel="stylesheet">
<pre><code class="language-javascript">const x = 42;</code></pre>
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
```

## Introduction
Prism.js is a client-side syntax highlighting library designed to be small, fast, and extensible. It powers code blocks on MDN, Smashing Magazine, Drupal, and many static-site generators, rendering highlighted code without server-side processing.

## What Prism.js Does
- Highlights code blocks in 300+ programming languages
- Runs in the browser with no build step required
- Extends via plugins for line numbers, copy buttons, diff highlighting, and more
- Supports custom themes through CSS variables
- Works with any HTML page, CMS, or static site generator

## Architecture Overview
Prism.js tokenizes source code using language-specific grammars defined as regular expression objects. Each grammar maps token types (keyword, string, comment) to regex patterns. The tokenizer produces a flat token array, and the renderer wraps each token in a span with a CSS class. Plugins hook into the highlighting lifecycle via events like before-highlight and after-highlight.

## Self-Hosting & Configuration
- Install via npm: `npm install prismjs` or load from a CDN
- Include only the languages you need to minimize bundle size
- Add plugins by importing their JS and CSS files
- Use the Prism.js download page to build a custom bundle with selected languages and plugins
- Server-side rendering is possible via Node.js with `Prism.highlight(code, grammar, language)`

## Key Features
- Core library is under 2 KB minified and gzipped
- Language definitions are lazy-loadable to keep initial payload small
- Works without a build step for quick integration into any HTML page
- Plugin ecosystem covers line numbers, autolinker, toolbar, and diff highlighting
- Themes are pure CSS, making customization straightforward

## Comparison with Similar Tools
- **Highlight.js** — Automatic language detection but larger bundle; Prism requires explicit language classes
- **Shiki** — Uses VS Code TextMate grammars for exact VS Code colors; heavier but more accurate
- **CodeMirror** — Full code editor, not just a highlighter; much larger footprint
- **Torchlight** — Server-side highlighting API; requires external service

## FAQ
**Q: Does Prism.js auto-detect the language?**
A: No. You specify the language via the `class="language-xxx"` attribute. The Autoloader plugin can load grammars on demand.

**Q: Can I use Prism.js with React or Vue?**
A: Yes. Libraries like react-syntax-highlighter wrap Prism.js for use as a component.

**Q: How do I add a new language?**
A: Define a grammar object mapping token types to regex patterns and register it with `Prism.languages.mylang = grammar`.

**Q: Is Prism.js still maintained?**
A: The project receives community contributions. For newer projects, also consider Shiki if VS Code parity matters.

## Sources
- https://github.com/PrismJS/prism
- https://prismjs.com/

---
Source: https://tokrepo.com/en/workflows/asset-4ca01e24
Author: AI Open Source