0
# Language System
1

2
The language system manages grammar definitions and language support for syntax highlighting across 280+ programming languages and markup formats. Languages are defined as grammar objects containing tokenization rules and stored in the `Prism.languages` object.
3

4
## Capabilities
5

6
### Language Object
7

8
The main container for all language grammars and language management functions.
9

10
```javascript { .api }
11
/**
12
 * Object containing all loaded language grammars
13
 * @type {Object<string, Grammar>}
14
 */
15
Prism.languages;
16
```
17

18
**Usage Examples:**
19

20
```javascript
21
// Access loaded languages
22
console.log(Object.keys(Prism.languages));
23
// Output: ['markup', 'css', 'clike', 'javascript', ...]
24

25
// Check if language is loaded
26
if (Prism.languages.python) {
27
    console.log('Python syntax highlighting available');
28
}
29

30
// Get grammar for highlighting
31
const jsGrammar = Prism.languages.javascript;
32
const highlighted = Prism.highlight('const x = 1;', jsGrammar, 'javascript');
33
```
34

35
### Built-in Languages
36

37
Core languages that are always available in the main Prism bundle:
38

39
```javascript { .api }
40
/**
41
 * HTML/XML markup language grammar
42
 * @type {Grammar}
43
 */
44
Prism.languages.markup;
45

46
/**
47
 * CSS language grammar
48
 * @type {Grammar}
49
 */
50
Prism.languages.css;
51

52
/**
53
 * C-like language base grammar
54
 * @type {Grammar}
55
 */
56
Prism.languages.clike;
57

58
/**
59
 * JavaScript language grammar
60
 * @type {Grammar}
61
 */
62
Prism.languages.javascript;
63
```
64

65
**Language Aliases:**
66

67
```javascript
68
// Common aliases are automatically set up
69
Prism.languages.html === Prism.languages.markup; // true
70
Prism.languages.xml === Prism.languages.markup;  // true
71
Prism.languages.svg === Prism.languages.markup;  // true
72
Prism.languages.js === Prism.languages.javascript; // true
73
```
74

75
### Language Extension
76

77
#### extend
78

79
Create new language definitions by extending existing ones.
80

81
```javascript { .api }
82
/**
83
 * Create new language by extending existing grammar
84
 * @param {string} id - Existing language ID to extend from
85
 * @param {object} redef - New grammar rules to add or override
86
 * @returns {object} New language grammar object
87
 */
88
Prism.languages.extend(id, redef);
89
```
90

91
**Usage Examples:**
92

93
```javascript
94
// Extend JavaScript for JSX
95
Prism.languages.jsx = Prism.languages.extend('javascript', {
96
    'tag': {
97
        pattern: /<\/?(?:[\w.:-]+(?:\s+(?:[\w.:-]+(?:=(?:"[^"]*"|'[^']*'|[^\s'">=]+))?)\s*)*\/?)?>|</,
98
        inside: {
99
            'tag-name': /^<\/?[\w.:-]+/,
100
            'attr-name': /[\w.:-]+(?=\s*=)/,
101
            'attr-value': /=(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
102
            'punctuation': /[=<>\/]/
103
        }
104
    }
105
});
106

107
// Extend CSS for SCSS
108
Prism.languages.scss = Prism.languages.extend('css', {
109
    'variable': /\$[\w-]+/,
110
    'at-rule': {
111
        pattern: /@[\w-]+(?:\([^)]*\))?(?=\s*{)/,
112
        inside: {
113
            'punctuation': /[()]/
114
        }
115
    }
116
});
117

118
// Create TypeScript by extending JavaScript  
119
Prism.languages.typescript = Prism.languages.extend('javascript', {
120
    'keyword': [
121
        /\b(?:abstract|as|asserts|async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|null|of|package|private|protected|public|readonly|return|require|set|static|super|switch|this|throw|try|type|typeof|undefined|var|void|while|with|yield)\b/
122
    ],
123
    'type-annotation': {
124
        pattern: /:\s*[a-zA-Z_][\w<>[\],.]*/, 
125
        inside: {
126
            'punctuation': /:/
127
        }
128
    }
129
});
130
```
131

132
#### insertBefore
133

134
Insert new grammar rules before existing ones in a language definition.
135

136
```javascript { .api }
137
/**
138
 * Insert new grammar rules before existing rule
139
 * @param {string} inside - Target language ID to modify
140
 * @param {string} before - Existing rule name to insert before
141
 * @param {object} insert - New rules to insert
142
 * @param {object} [root] - Root grammar object (defaults to Prism.languages)
143
 */
144
Prism.languages.insertBefore(inside, before, insert, root);
145
```
146

147
**Usage Examples:**
148

149
```javascript
150
// Add template literals to JavaScript before strings
151
Prism.languages.insertBefore('javascript', 'string', {
152
    'template-string': {
153
        pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,
154
        greedy: true,
155
        inside: {
156
            'template-interpolation': {
157
                pattern: /\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,
158
                inside: {
159
                    'interpolation-punctuation': {
160
                        pattern: /^\${|}$/,
161
                        alias: 'punctuation'
162
                    },
163
                    rest: Prism.languages.javascript
164
                }
165
            },
166
            'string': /[\s\S]+/
167
        }
168
    }
169
});
170

171
// Add JSDoc comments before regular comments
172
Prism.languages.insertBefore('javascript', 'comment', {
173
    'jsdoc': {
174
        pattern: /\/\*\*[\s\S]*?\*\//,
175
        inside: {
176
            'tag': /@\w+/,
177
            'parameter': /\{[^}]+\}/
178
        }
179
    }
180
});
181

182
// Modify existing language in place
183
Prism.languages.insertBefore('css', 'property', {
184
    'custom-property': {
185
        pattern: /--[\w-]+/,
186
        alias: 'variable'
187
    }
188
});
189
```
190

191
### Grammar Traversal
192

193
#### DFS
194

195
Depth-first search function for traversing and modifying grammar objects.
196

197
```javascript { .api }
198
/**
199
 * Perform depth-first search on grammar object
200
 * @param {object} o - Grammar object to traverse
201
 * @param {function} callback - Function called for each node
202
 * @param {string|function} [type] - Type filter or type function
203
 * @param {WeakMap} [visited] - Visited objects map for circular reference handling
204
 */
205
Prism.languages.DFS(o, callback, type, visited);
206
```
207

208
**Usage Examples:**
209

210
```javascript
211
// Find all string patterns in a grammar
212
const stringPatterns = [];
213
Prism.languages.DFS(Prism.languages.javascript, function(key, value) {
214
    if (key === 'pattern' && value instanceof RegExp) {
215
        stringPatterns.push(value);
216
    }
217
});
218

219
// Modify all regex patterns to be case insensitive
220
Prism.languages.DFS(Prism.languages.css, function(key, value, type) {
221
    if (key === 'pattern' && value instanceof RegExp && !value.ignoreCase) {
222
        return new RegExp(value.source, value.flags + 'i');
223
    }
224
});
225

226
// Count different token types in a grammar
227
const tokenCounts = {};
228
Prism.languages.DFS(Prism.languages.python, function(key, value, type) {
229
    if (typeof key === 'string' && typeof value === 'object' && value.pattern) {
230
        tokenCounts[key] = (tokenCounts[key] || 0) + 1;
231
    }
232
});
233
```
234

235
## Component Loading (Node.js)
236

237
For Node.js environments, languages can be loaded dynamically:
238

239
```javascript { .api }
240
/**
241
 * Load language components dynamically (Node.js only)
242
 * @param {string|string[]} [languages] - Language IDs to load, or all if undefined
243
 */
244
const loadLanguages = require('prismjs/components/');
245
loadLanguages(languages);
246

247
/**
248
 * Suppress warning messages during loading
249
 * @type {boolean}
250
 */
251
loadLanguages.silent;
252
```
253

254
**Usage Examples:**
255

256
```javascript
257
const loadLanguages = require('prismjs/components/');
258

259
// Load specific languages
260
loadLanguages(['css', 'markup']);
261

262
// Load all available languages
263
loadLanguages();
264

265
// Load with dependencies automatically resolved
266
loadLanguages(['jsx']); // Automatically loads javascript first
267

268
// Suppress warnings for missing languages
269
loadLanguages.silent = true;
270
loadLanguages(['nonexistent-language']); // Won't log warning
271

272
// Check what languages are available
273
const components = require('prismjs/components.js');
274
console.log(Object.keys(components.languages));
275
```
276

277
## Available Languages
278

279
PrismJS supports over 280 languages. Here are some commonly used ones:
280

281
### Programming Languages
282

283
```javascript
284
// Popular programming languages
285
Prism.languages.javascript  // JavaScript/ECMAScript
286
Prism.languages.typescript  // TypeScript
287
Prism.languages.python      // Python  
288
Prism.languages.java        // Java
289
Prism.languages.csharp      // C#
290
Prism.languages.cpp         // C++
291
Prism.languages.c           // C
292
Prism.languages.php         // PHP
293
Prism.languages.ruby        // Ruby
294
Prism.languages.go          // Go
295
Prism.languages.rust        // Rust
296
Prism.languages.swift       // Swift
297
Prism.languages.kotlin      // Kotlin
298
Prism.languages.scala       // Scala
299
```
300

301
### Web Technologies
302

303
```javascript
304
// Web markup and styling
305
Prism.languages.html        // HTML (alias for markup)
306
Prism.languages.css         // CSS
307
Prism.languages.scss        // Sass/SCSS
308
Prism.languages.less        // Less CSS
309
Prism.languages.stylus      // Stylus
310
Prism.languages.xml         // XML
311
Prism.languages.svg         // SVG
312
```
313

314
### Data Formats
315

316
```javascript
317
// Configuration and data formats
318
Prism.languages.json        // JSON
319
Prism.languages.yaml        // YAML
320
Prism.languages.toml        // TOML
321
Prism.languages.ini         // INI files
322
Prism.languages.properties  // Properties files
323
Prism.languages.csv         // CSV
324
```
325

326
### Query Languages
327

328
```javascript
329
// Database and query languages
330
Prism.languages.sql         // SQL
331
Prism.languages.mongodb     // MongoDB queries
332
Prism.languages.graphql     // GraphQL
333
Prism.languages.sparql      // SPARQL
334
```
335

336
### Shell and Config
337

338
```javascript
339
// Shell and system languages
340
Prism.languages.bash        // Bash shell
341
Prism.languages.powershell  // PowerShell
342
Prism.languages.batch       // Windows Batch
343
Prism.languages.dockerfile  // Docker files
344
Prism.languages.nginx       // Nginx config
345
```
346

347
## Language Dependencies
348

349
Some languages depend on others and will automatically load their dependencies:
350

351
```javascript
352
// Dependencies are handled automatically
353
loadLanguages(['jsx']);        // Loads javascript first
354
loadLanguages(['typescript']); // Loads javascript first  
355
loadLanguages(['scss']);       // Loads css first
356
loadLanguages(['php']);        // Loads markup first for embedded HTML
357
```
358

359
## Custom Language Definition
360

361
```javascript
362
// Define a custom language
363
Prism.languages.mylang = {
364
    'comment': /\/\/.*$/m,
365
    'string': /"(?:[^"\\]|\\.)*"/,
366
    'number': /\b\d+\.?\d*\b/,
367
    'keyword': /\b(?:if|else|while|function|return)\b/,
368
    'operator': /[+\-*\/=<>!]/,
369
    'punctuation': /[{}();,]/
370
};
371

372
// Use the custom language
373
const code = 'function hello() { return "world"; }';
374
const highlighted = Prism.highlight(code, Prism.languages.mylang, 'mylang');
375
```
376

377
## Grammar Structure
378

379
Language grammars are objects with token definitions:
380

381
```javascript { .api }
382
/**
383
 * Grammar object structure
384
 * @typedef {Object} Grammar
385
 * @property {RegExp|Object} [tokenName] - Token definition with pattern and options
386
 */
387

388
// Example grammar structure
389
const exampleGrammar = {
390
    'comment': {
391
        pattern: /\/\*[\s\S]*?\*\/|\/\/.*$/m,
392
        greedy: true
393
    },
394
    'string': {
395
        pattern: /"(?:[^"\\]|\\.)*"/,
396
        greedy: true
397
    },
398
    'keyword': /\b(?:if|else|function|return)\b/,
399
    'number': /\b\d+\.?\d*\b/,
400
    'operator': /[=+\-*\/]/,
401
    'punctuation': /[{}();,]/
402
};
403
```
404

405
## Error Handling
406

407
```javascript
408
// Safe language access
409
function getLanguage(langId) {
410
    if (Prism.languages[langId]) {
411
        return Prism.languages[langId];
412
    } else {
413
        console.warn(`Language '${langId}' not found`);
414
        return Prism.languages.plain || {};
415
    }
416
}
417

418
// Language loading error handling
419
try {
420
    loadLanguages(['python']);
421
    console.log('Python loaded successfully');
422
} catch (error) {
423
    console.error('Failed to load Python:', error);
424
}
425
```