tessl/npm-prism-themes

Additional CSS themes for the Prism syntax highlighting library

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Prism Themes

Name: tessl/npm-prism-themes
Author: tessl

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";

Install with Tessl CLI

npx tessl i tessl/npm-prism-themes

docs

index.md

tile.json

tessl/npm-prism-themes

index.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Prism Themes

Package Information

Core Imports

Basic Usage

HTML Integration

Build Tool Integration

Node.js Programmatic Access

Capabilities

Theme Directory Access

Available CSS Themes

Theme CSS Structure

Minified Versions

Installation Options

NPM Package Manager

Yarn Package Manager

Direct CSS Usage

CDN Usage

Theme Categories

Dark Themes

Light Themes

Accessibility Themes

Types

index.mddocs/