tessl/npm-prismjs
Lightweight, robust, elegant syntax highlighting library with support for 280+ languages and multiple themes
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-prismjs@1.30.00
# PrismJS
1
2
PrismJS is a lightweight, robust, and elegant syntax highlighting library designed for web applications and command-line interfaces. It provides comprehensive syntax highlighting capabilities with support for over 280 programming languages and markup formats, featuring a modular architecture that allows developers to include only the languages they need to minimize bundle size.
3
4
## Package Information
5
6
- **Package Name**: prismjs
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install prismjs`
10
11
## Core Imports
12
13
**Browser (Script Tag):**
14
```html
15
<script src="prism.js"></script>
16
<link href="themes/prism.css" rel="stylesheet" />
17
```
18
19
**CommonJS (Node.js):**
20
```javascript
21
const Prism = require('prismjs');
22
```
23
24
**ES Modules:**
25
```javascript
26
import Prism from 'prismjs';
27
```
28
29
**Component Loading (Node.js):**
30
```javascript
31
const loadLanguages = require('prismjs/components/');
32
loadLanguages(['css', 'javascript']);
33
```
34
35
## Basic Usage
36
37
```html
38
<!DOCTYPE html>
39
<html>
40
<head>
41
<link href="themes/prism.css" rel="stylesheet" />
42
</head>
43
<body>
44
<!-- Automatic highlighting -->
45
<pre><code class="language-javascript">
46
const greeting = "Hello, World!";
47
console.log(greeting);
48
</code></pre>
49
50
<script src="prism.js"></script>
51
</body>
52
</html>
53
```
54
55
**Manual highlighting:**
56
```javascript
57
const code = 'const x = 42;';
58
const grammar = Prism.languages.javascript;
59
const highlighted = Prism.highlight(code, grammar, 'javascript');
60
document.getElementById('output').innerHTML = highlighted;
61
```
62
63
## Architecture
64
65
PrismJS is built around several key components:
66
67
- **Core Engine**: The main Prism object providing highlighting functionality and utility methods
68
- **Language Grammars**: Modular language definitions stored in `Prism.languages` that define syntax rules
69
- **Token System**: Structured representation of parsed code as Token objects and token streams
70
- **Plugin System**: Extensible architecture for additional features via `Prism.plugins`
71
- **Theme System**: CSS-based themes for visual styling of highlighted code
72
- **Hook System**: Event-driven system allowing plugins to integrate with the highlighting process
73
74
## Capabilities
75
76
### Core Highlighting
77
78
Main highlighting functions for automatic and manual syntax highlighting of code blocks and strings.
79
80
```javascript { .api }
81
/**
82
* Highlight all code elements on the page automatically
83
* @param {boolean} [async=false] - Whether to use Web Workers for highlighting
84
* @param {function} [callback] - Callback function invoked after highlighting
85
*/
86
Prism.highlightAll(async, callback);
87
88
/**
89
* Highlight code inside a single element
90
* @param {Element} element - Element containing code with language-* class
91
* @param {boolean} [async=false] - Whether to use Web Workers
92
* @param {function} [callback] - Optional callback after highlighting
93
*/
94
Prism.highlightElement(element, async, callback);
95
96
/**
97
* Low-level highlighting function for strings
98
* @param {string} text - Code string to highlight
99
* @param {object} grammar - Language grammar object
100
* @param {string} language - Language identifier
101
* @returns {string} HTML string with highlighted markup
102
*/
103
Prism.highlight(text, grammar, language);
104
105
/**
106
* Tokenize code string into structured token stream
107
* @param {string} text - Code string to tokenize
108
* @param {object} grammar - Language grammar object
109
* @returns {Array} Array of strings and Token objects
110
*/
111
Prism.tokenize(text, grammar);
112
```
113
114
[Core Highlighting](./core-highlighting.md)
115
116
### Language System
117
118
Grammar management and language definitions for syntax highlighting rules across 280+ supported languages.
119
120
```javascript { .api }
121
/**
122
* Object containing all loaded language grammars
123
*/
124
Prism.languages;
125
126
/**
127
* Create new language by extending existing one
128
* @param {string} id - Existing language ID to extend
129
* @param {object} redef - New grammar rules to add/override
130
* @returns {object} New language grammar object
131
*/
132
Prism.languages.extend(id, redef);
133
134
/**
135
* Insert new grammar rules before existing ones
136
* @param {string} inside - Target language ID
137
* @param {string} before - Existing rule name to insert before
138
* @param {object} insert - New rules to insert
139
* @param {object} [root] - Root grammar object (defaults to Prism.languages)
140
*/
141
Prism.languages.insertBefore(inside, before, insert, root);
142
```
143
144
[Language System](./language-system.md)
145
146
### Token System
147
148
Object system for representing parsed code as structured tokens with type information and content.
149
150
```javascript { .api }
151
/**
152
* Constructor for token objects representing parsed code elements
153
* @param {string} type - Token type (keyword, string, number, etc.)
154
* @param {string|Array} content - Token content or nested tokens
155
* @param {string|Array} [alias] - Additional CSS classes
156
* @param {string} [matchedStr] - Original matched string
157
* @constructor
158
*/
159
function Token(type, content, alias, matchedStr);
160
161
/**
162
* Convert tokens to HTML string representation
163
* @param {string|Token|Array} o - Token or token stream to stringify
164
* @param {string} language - Language identifier for CSS classes
165
* @returns {string} HTML markup string
166
*/
167
Token.stringify(o, language);
168
```
169
170
[Token System](./token-system.md)
171
172
### Plugin System
173
174
Extensible plugin architecture for adding features like line numbers, toolbars, and specialized highlighting.
175
176
```javascript { .api }
177
/**
178
* Object containing all loaded plugins
179
*/
180
Prism.plugins;
181
182
/**
183
* Hook system for plugin integration
184
*/
185
Prism.hooks;
186
187
/**
188
* Add hook callback for specific event
189
* @param {string} name - Hook name (before-highlight, after-highlight, etc.)
190
* @param {function} callback - Function to execute on hook
191
*/
192
Prism.hooks.add(name, callback);
193
194
/**
195
* Run all callbacks for specific hook
196
* @param {string} name - Hook name to execute
197
* @param {object} env - Environment object passed to callbacks
198
*/
199
Prism.hooks.run(name, env);
200
```
201
202
[Plugin System](./plugin-system.md)
203
204
### Utility Functions
205
206
Helper functions for DOM manipulation, language detection, and object operations.
207
208
```javascript { .api }
209
/**
210
* Utility methods namespace
211
*/
212
Prism.util;
213
214
/**
215
* Extract language from element's CSS classes
216
* @param {Element} element - DOM element to check
217
* @returns {string} Language identifier or 'none'
218
*/
219
Prism.util.getLanguage(element);
220
221
/**
222
* Set language classes on element
223
* @param {Element} element - DOM element to modify
224
* @param {string} language - Language identifier
225
*/
226
Prism.util.setLanguage(element, language);
227
228
/**
229
* Deep clone object with circular reference handling
230
* @param {*} o - Object to clone
231
* @param {WeakMap} [visited] - Visited objects map
232
* @returns {*} Cloned object
233
*/
234
Prism.util.clone(o, visited);
235
236
/**
237
* HTML encode tokens for safe output
238
* @param {*} tokens - Tokens to encode
239
* @returns {*} Encoded tokens
240
*/
241
Prism.util.encode(tokens);
242
```
243
244
[Utilities](./utilities.md)
245
246
## Global Configuration
247
248
```javascript { .api }
249
/**
250
* Prevent automatic highlighting on page load
251
* @type {boolean}
252
*/
253
Prism.manual;
254
255
/**
256
* Disable Web Worker message handler in worker contexts
257
* @type {boolean}
258
*/
259
Prism.disableWorkerMessageHandler;
260
```
261
262
## Types
263
264
```javascript { .api }
265
/**
266
* Token representing a parsed code element
267
* @typedef {Object} Token
268
* @property {string} type - Token type identifier
269
* @property {string|TokenStream} content - Token content
270
* @property {string|string[]} alias - CSS class aliases
271
* @property {number} length - Length of original matched string
272
*/
273
274
/**
275
* Array of strings and Token objects representing parsed code
276
* @typedef {Array<string|Token>} TokenStream
277
*/
278
279
/**
280
* Grammar object defining language syntax rules
281
* @typedef {Object} Grammar
282
*/
283
284
/**
285
* Callback function for highlighting completion
286
* @typedef {function} HighlightCallback
287
* @param {Element} element - The highlighted element
288
*/
289
```