or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-prism-themes

Additional CSS themes for the Prism syntax highlighting library

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/prism-themes@1.9.x

To install, run

npx @tessl/cli install tessl/npm-prism-themes@1.9.0

Prism Themes

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.

Package Information

Package Name: prism-themes
Package Type: npm
Language: CSS/JavaScript
Installation: npm install prism-themes

Core Imports

For accessing theme file locations programmatically:

const { themesDirectory } = require("prism-themes");

ES Modules:

import { themesDirectory } from "prism-themes";

For direct CSS theme usage:

<link href="node_modules/prism-themes/themes/prism-dracula.css" rel="stylesheet" />

Basic Usage

HTML Integration

Include a theme CSS file directly in your HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Code Syntax Highlighting</title>
        <!-- Include a Prism theme -->
        <link href="themes/prism-vsc-dark-plus.css" rel="stylesheet" />
    </head>
    <body>
        <pre><code class="language-javascript">
function hello() {
    console.log("Hello, world!");
}
        </code></pre>
        <!-- Include Prism.js -->
        <script src="prism.js"></script>
    </body>
</html>

Build Tool Integration

Import themes in your build process:

// Webpack/bundler CSS import
import 'prism-themes/themes/prism-night-owl.css';

// Or programmatically access theme directory
import { themesDirectory } from 'prism-themes';
const themePath = `${themesDirectory}/prism-nord.css`;

Node.js Programmatic Access

const { themesDirectory } = require("prism-themes");
const fs = require("fs");
const path = require("path");

// Get path to specific theme
const draculaThemePath = path.join(themesDirectory, "prism-dracula.css");

// Read theme content
const themeCSS = fs.readFileSync(draculaThemePath, "utf8");

// List all available themes
const themes = fs.readdirSync(themesDirectory)
  .filter(file => file.endsWith('.css') && !file.endsWith('.min.css'))
  .map(file => file.replace('.css', ''));

Capabilities

Theme Directory Access

Provides programmatic access to the themes directory path.

/**
 * Main export from prism-themes package
 * Contains a single property pointing to the themes directory
 */
module.exports: {
  themesDirectory: string;
}

// CommonJS export
const { themesDirectory } = require("prism-themes");

// ES Module export  
import { themesDirectory } from "prism-themes";

Available CSS Themes

Complete collection of 36 CSS theme files for Prism syntax highlighting.

/* Theme file naming pattern: prism-{theme-name}.css */

/* Popular Editor Themes */
"prism-vsc-dark-plus.css"     // VS Code Dark+ theme
"prism-vs.css"                // Visual Studio theme
"prism-atom-dark.css"         // Atom Dark theme
"prism-dracula.css"           // Dracula theme
"prism-darcula.css"           // JetBrains Darcula theme
"prism-night-owl.css"         // Night Owl VS Code theme
"prism-one-dark.css"          // Atom One Dark theme
"prism-one-light.css"         // Atom One Light theme

/* Material Design Themes */
"prism-material-dark.css"     // Material Design dark theme
"prism-material-light.css"    // Material Design light theme
"prism-material-oceanic.css"  // Material Oceanic theme

/* Color Scheme Themes */
"prism-nord.css"              // Nord theme
"prism-gruvbox-dark.css"      // Gruvbox dark theme
"prism-gruvbox-light.css"     // Gruvbox light theme
"prism-solarized-dark-atom.css" // Solarized Dark Atom theme

/* Duotone Themes */
"prism-duotone-dark.css"      // Duotone dark theme
"prism-duotone-light.css"     // Duotone light theme
"prism-duotone-sea.css"       // Duotone sea theme
"prism-duotone-space.css"     // Duotone space theme
"prism-duotone-earth.css"     // Duotone earth theme
"prism-duotone-forest.css"    // Duotone forest theme

/* Accessibility Themes */
"prism-a11y-dark.css"         // Accessibility-focused dark theme

/* Specialty Themes */
"prism-synthwave84.css"       // Synthwave '84 retro theme
"prism-shades-of-purple.css"  // Shades of Purple theme
"prism-holi-theme.css"        // Holi colorful theme
"prism-lucario.css"           // Lucario theme
"prism-z-touch.css"           // Z-Touch theme

/* Cold/Minimal Themes */
"prism-coldark-cold.css"      // Coldark cold theme
"prism-coldark-dark.css"      // Coldark dark theme
"prism-coy-without-shadows.css" // Coy theme without shadows

/* Vintage/Classic Themes */
"prism-cb.css"                // CB theme
"prism-ghcolors.css"          // GitHub colors theme
"prism-pojoaque.css"          // Pojoaque theme
"prism-xonokai.css"           // Xonokai theme
"prism-hopscotch.css"         // Hopscotch theme
"prism-base16-ateliersulphurpool.light.css" // Base16 light theme

Theme CSS Structure

Each theme file provides comprehensive styling for Prism.js syntax highlighting.

/* Standard theme structure - applies to all theme files */

/* Base code styling */
code[class*="language-"],
pre[class*="language-"] {
  /* Font, spacing, and base colors */
}

/* Code block container styling */
pre[class*="language-"] {
  /* Block-level styling, padding, margins */
}

/* Inline code styling */
:not(pre) > code[class*="language-"] {
  /* Inline code specific styling */
}

/* Token-specific styling */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { /* Comment styling */ }

.token.punctuation { /* Punctuation styling */ }

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted { /* Property/tag styling */ }

.token.boolean,
.token.number { /* Boolean/number styling */ }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted { /* Selector/string styling */ }

.token.operator,
.token.entity,
.token.url { /* Operator styling */ }

.token.atrule,
.token.attr-value,
.token.keyword { /* Keyword styling */ }

.token.function,
.token.class-name { /* Function/class styling */ }

.token.regex,
.token.important,
.token.variable { /* Variable/regex styling */ }

Minified Versions

Build process generates minified versions of all themes.

/* Minified theme naming pattern: prism-{theme-name}.min.css */
/* Available for all 36 themes via npm run build */

Installation Options

NPM Package Manager

npm install prism-themes

Yarn Package Manager

yarn add prism-themes

Direct CSS Usage

Access themes directly from node_modules:

<link href="node_modules/prism-themes/themes/prism-dracula.css" rel="stylesheet" />

CDN Usage

Use with CDN services that support npm packages:

<link href="https://unpkg.com/prism-themes@1.9.0/themes/prism-vsc-dark-plus.css" rel="stylesheet" />

Theme Categories

Dark Themes

prism-vsc-dark-plus.css - VS Code Dark+
prism-atom-dark.css - Atom Dark
prism-dracula.css - Dracula
prism-darcula.css - JetBrains Darcula
prism-night-owl.css - Night Owl
prism-one-dark.css - One Dark
prism-material-dark.css - Material Dark
prism-nord.css - Nord
prism-gruvbox-dark.css - Gruvbox Dark
prism-a11y-dark.css - Accessibility Dark
prism-synthwave84.css - Synthwave '84
prism-coldark-dark.css - Coldark Dark
And more...

Light Themes

prism-vs.css - Visual Studio
prism-one-light.css - One Light
prism-material-light.css - Material Light
prism-gruvbox-light.css - Gruvbox Light
prism-duotone-light.css - Duotone Light
prism-base16-ateliersulphurpool.light.css - Base16 Light
prism-coldark-cold.css - Coldark Cold
And more...

Accessibility Themes

prism-a11y-dark.css - High contrast dark theme optimized for accessibility

Types

/**
 * Main export from prism-themes package
 */
interface PrismThemesConfig {
  /** Absolute path to the themes directory */
  themesDirectory: string;
}

/**
 * Theme file naming convention
 */
type ThemeFileName = `prism-${string}.css`;

/**
 * Available theme names (without prism- prefix and .css extension)
 */
type ThemeName = 
  | "a11y-dark"
  | "atom-dark"
  | "base16-ateliersulphurpool.light"
  | "cb"
  | "coldark-cold"
  | "coldark-dark"
  | "coy-without-shadows"
  | "darcula"
  | "dracula"
  | "duotone-dark"
  | "duotone-earth"
  | "duotone-forest"
  | "duotone-light"
  | "duotone-sea"
  | "duotone-space"
  | "ghcolors"
  | "gruvbox-dark"
  | "gruvbox-light"
  | "holi-theme"
  | "hopscotch"
  | "lucario"
  | "material-dark"
  | "material-light"
  | "material-oceanic"
  | "night-owl"
  | "nord"
  | "one-dark"
  | "one-light"
  | "pojoaque"
  | "shades-of-purple"
  | "solarized-dark-atom"
  | "synthwave84"
  | "vs"
  | "vsc-dark-plus"
  | "xonokai"
  | "z-touch";