tessl/npm-prism-themes
Additional CSS themes for the Prism syntax highlighting library
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-prism-themes@1.9.00
# Prism Themes
1
2
Prism Themes is a collection of additional CSS themes for the Prism syntax highlighting library. It provides 36 carefully crafted themes ranging from popular editor themes like VS Code Dark+, Atom Dark, Dracula, and Material Dark to accessibility-focused themes, enabling developers to customize the visual appearance of code blocks in web applications.
3
4
## Package Information
5
6
- **Package Name**: prism-themes
7
- **Package Type**: npm
8
- **Language**: CSS/JavaScript
9
- **Installation**: `npm install prism-themes`
10
11
## Core Imports
12
13
For accessing theme file locations programmatically:
14
15
```javascript
16
const { themesDirectory } = require("prism-themes");
17
```
18
19
ES Modules:
20
21
```javascript
22
import { themesDirectory } from "prism-themes";
23
```
24
25
For direct CSS theme usage:
26
27
```html
28
<link href="node_modules/prism-themes/themes/prism-dracula.css" rel="stylesheet" />
29
```
30
31
## Basic Usage
32
33
### HTML Integration
34
35
Include a theme CSS file directly in your HTML:
36
37
```html
38
<!DOCTYPE html>
39
<html>
40
<head>
41
<title>Code Syntax Highlighting</title>
42
<!-- Include a Prism theme -->
43
<link href="themes/prism-vsc-dark-plus.css" rel="stylesheet" />
44
</head>
45
<body>
46
<pre><code class="language-javascript">
47
function hello() {
48
console.log("Hello, world!");
49
}
50
</code></pre>
51
<!-- Include Prism.js -->
52
<script src="prism.js"></script>
53
</body>
54
</html>
55
```
56
57
### Build Tool Integration
58
59
Import themes in your build process:
60
61
```javascript
62
// Webpack/bundler CSS import
63
import 'prism-themes/themes/prism-night-owl.css';
64
65
// Or programmatically access theme directory
66
import { themesDirectory } from 'prism-themes';
67
const themePath = `${themesDirectory}/prism-nord.css`;
68
```
69
70
### Node.js Programmatic Access
71
72
```javascript
73
const { themesDirectory } = require("prism-themes");
74
const fs = require("fs");
75
const path = require("path");
76
77
// Get path to specific theme
78
const draculaThemePath = path.join(themesDirectory, "prism-dracula.css");
79
80
// Read theme content
81
const themeCSS = fs.readFileSync(draculaThemePath, "utf8");
82
83
// List all available themes
84
const themes = fs.readdirSync(themesDirectory)
85
.filter(file => file.endsWith('.css') && !file.endsWith('.min.css'))
86
.map(file => file.replace('.css', ''));
87
```
88
89
## Capabilities
90
91
### Theme Directory Access
92
93
Provides programmatic access to the themes directory path.
94
95
```javascript { .api }
96
/**
97
* Main export from prism-themes package
98
* Contains a single property pointing to the themes directory
99
*/
100
module.exports: {
101
themesDirectory: string;
102
}
103
104
// CommonJS export
105
const { themesDirectory } = require("prism-themes");
106
107
// ES Module export
108
import { themesDirectory } from "prism-themes";
109
```
110
111
### Available CSS Themes
112
113
Complete collection of 36 CSS theme files for Prism syntax highlighting.
114
115
```css { .api }
116
/* Theme file naming pattern: prism-{theme-name}.css */
117
118
/* Popular Editor Themes */
119
"prism-vsc-dark-plus.css" // VS Code Dark+ theme
120
"prism-vs.css" // Visual Studio theme
121
"prism-atom-dark.css" // Atom Dark theme
122
"prism-dracula.css" // Dracula theme
123
"prism-darcula.css" // JetBrains Darcula theme
124
"prism-night-owl.css" // Night Owl VS Code theme
125
"prism-one-dark.css" // Atom One Dark theme
126
"prism-one-light.css" // Atom One Light theme
127
128
/* Material Design Themes */
129
"prism-material-dark.css" // Material Design dark theme
130
"prism-material-light.css" // Material Design light theme
131
"prism-material-oceanic.css" // Material Oceanic theme
132
133
/* Color Scheme Themes */
134
"prism-nord.css" // Nord theme
135
"prism-gruvbox-dark.css" // Gruvbox dark theme
136
"prism-gruvbox-light.css" // Gruvbox light theme
137
"prism-solarized-dark-atom.css" // Solarized Dark Atom theme
138
139
/* Duotone Themes */
140
"prism-duotone-dark.css" // Duotone dark theme
141
"prism-duotone-light.css" // Duotone light theme
142
"prism-duotone-sea.css" // Duotone sea theme
143
"prism-duotone-space.css" // Duotone space theme
144
"prism-duotone-earth.css" // Duotone earth theme
145
"prism-duotone-forest.css" // Duotone forest theme
146
147
/* Accessibility Themes */
148
"prism-a11y-dark.css" // Accessibility-focused dark theme
149
150
/* Specialty Themes */
151
"prism-synthwave84.css" // Synthwave '84 retro theme
152
"prism-shades-of-purple.css" // Shades of Purple theme
153
"prism-holi-theme.css" // Holi colorful theme
154
"prism-lucario.css" // Lucario theme
155
"prism-z-touch.css" // Z-Touch theme
156
157
/* Cold/Minimal Themes */
158
"prism-coldark-cold.css" // Coldark cold theme
159
"prism-coldark-dark.css" // Coldark dark theme
160
"prism-coy-without-shadows.css" // Coy theme without shadows
161
162
/* Vintage/Classic Themes */
163
"prism-cb.css" // CB theme
164
"prism-ghcolors.css" // GitHub colors theme
165
"prism-pojoaque.css" // Pojoaque theme
166
"prism-xonokai.css" // Xonokai theme
167
"prism-hopscotch.css" // Hopscotch theme
168
"prism-base16-ateliersulphurpool.light.css" // Base16 light theme
169
```
170
171
### Theme CSS Structure
172
173
Each theme file provides comprehensive styling for Prism.js syntax highlighting.
174
175
```css { .api }
176
/* Standard theme structure - applies to all theme files */
177
178
/* Base code styling */
179
code[class*="language-"],
180
pre[class*="language-"] {
181
/* Font, spacing, and base colors */
182
}
183
184
/* Code block container styling */
185
pre[class*="language-"] {
186
/* Block-level styling, padding, margins */
187
}
188
189
/* Inline code styling */
190
:not(pre) > code[class*="language-"] {
191
/* Inline code specific styling */
192
}
193
194
/* Token-specific styling */
195
.token.comment,
196
.token.prolog,
197
.token.doctype,
198
.token.cdata { /* Comment styling */ }
199
200
.token.punctuation { /* Punctuation styling */ }
201
202
.token.property,
203
.token.tag,
204
.token.constant,
205
.token.symbol,
206
.token.deleted { /* Property/tag styling */ }
207
208
.token.boolean,
209
.token.number { /* Boolean/number styling */ }
210
211
.token.selector,
212
.token.attr-name,
213
.token.string,
214
.token.char,
215
.token.builtin,
216
.token.inserted { /* Selector/string styling */ }
217
218
.token.operator,
219
.token.entity,
220
.token.url { /* Operator styling */ }
221
222
.token.atrule,
223
.token.attr-value,
224
.token.keyword { /* Keyword styling */ }
225
226
.token.function,
227
.token.class-name { /* Function/class styling */ }
228
229
.token.regex,
230
.token.important,
231
.token.variable { /* Variable/regex styling */ }
232
```
233
234
### Minified Versions
235
236
Build process generates minified versions of all themes.
237
238
```css { .api }
239
/* Minified theme naming pattern: prism-{theme-name}.min.css */
240
/* Available for all 36 themes via npm run build */
241
```
242
243
## Installation Options
244
245
### NPM Package Manager
246
247
```bash
248
npm install prism-themes
249
```
250
251
### Yarn Package Manager
252
253
```bash
254
yarn add prism-themes
255
```
256
257
### Direct CSS Usage
258
259
Access themes directly from node_modules:
260
261
```html
262
<link href="node_modules/prism-themes/themes/prism-dracula.css" rel="stylesheet" />
263
```
264
265
### CDN Usage
266
267
Use with CDN services that support npm packages:
268
269
```html
270
<link href="https://unpkg.com/prism-themes@1.9.0/themes/prism-vsc-dark-plus.css" rel="stylesheet" />
271
```
272
273
## Theme Categories
274
275
### Dark Themes
276
- `prism-vsc-dark-plus.css` - VS Code Dark+
277
- `prism-atom-dark.css` - Atom Dark
278
- `prism-dracula.css` - Dracula
279
- `prism-darcula.css` - JetBrains Darcula
280
- `prism-night-owl.css` - Night Owl
281
- `prism-one-dark.css` - One Dark
282
- `prism-material-dark.css` - Material Dark
283
- `prism-nord.css` - Nord
284
- `prism-gruvbox-dark.css` - Gruvbox Dark
285
- `prism-a11y-dark.css` - Accessibility Dark
286
- `prism-synthwave84.css` - Synthwave '84
287
- `prism-coldark-dark.css` - Coldark Dark
288
- And more...
289
290
### Light Themes
291
- `prism-vs.css` - Visual Studio
292
- `prism-one-light.css` - One Light
293
- `prism-material-light.css` - Material Light
294
- `prism-gruvbox-light.css` - Gruvbox Light
295
- `prism-duotone-light.css` - Duotone Light
296
- `prism-base16-ateliersulphurpool.light.css` - Base16 Light
297
- `prism-coldark-cold.css` - Coldark Cold
298
- And more...
299
300
### Accessibility Themes
301
- `prism-a11y-dark.css` - High contrast dark theme optimized for accessibility
302
303
## Types
304
305
```typescript { .api }
306
/**
307
* Main export from prism-themes package
308
*/
309
interface PrismThemesConfig {
310
/** Absolute path to the themes directory */
311
themesDirectory: string;
312
}
313
314
/**
315
* Theme file naming convention
316
*/
317
type ThemeFileName = `prism-${string}.css`;
318
319
/**
320
* Available theme names (without prism- prefix and .css extension)
321
*/
322
type ThemeName =
323
| "a11y-dark"
324
| "atom-dark"
325
| "base16-ateliersulphurpool.light"
326
| "cb"
327
| "coldark-cold"
328
| "coldark-dark"
329
| "coy-without-shadows"
330
| "darcula"
331
| "dracula"
332
| "duotone-dark"
333
| "duotone-earth"
334
| "duotone-forest"
335
| "duotone-light"
336
| "duotone-sea"
337
| "duotone-space"
338
| "ghcolors"
339
| "gruvbox-dark"
340
| "gruvbox-light"
341
| "holi-theme"
342
| "hopscotch"
343
| "lucario"
344
| "material-dark"
345
| "material-light"
346
| "material-oceanic"
347
| "night-owl"
348
| "nord"
349
| "one-dark"
350
| "one-light"
351
| "pojoaque"
352
| "shades-of-purple"
353
| "solarized-dark-atom"
354
| "synthwave84"
355
| "vs"
356
| "vsc-dark-plus"
357
| "xonokai"
358
| "z-touch";
359
```