tessl/npm-prismjs

Lightweight, robust, elegant syntax highlighting library with support for 280+ languages and multiple themes

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

PrismJS

Name: tessl/npm-prismjs
Author: tessl

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.

Package Information

Package Name: prismjs
Package Type: npm
Language: JavaScript
Installation: npm install prismjs

Core Imports

Browser (Script Tag):

<script src="prism.js"></script>
<link href="themes/prism.css" rel="stylesheet" />

CommonJS (Node.js):

const Prism = require('prismjs');

ES Modules:

import Prism from 'prismjs';

Component Loading (Node.js):

const loadLanguages = require('prismjs/components/');
loadLanguages(['css', 'javascript']);

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
    <!-- Automatic highlighting -->
    <pre><code class="language-javascript">
const greeting = "Hello, World!";
console.log(greeting);
    </code></pre>
    
    <script src="prism.js"></script>
</body>
</html>

Manual highlighting:

const code = 'const x = 42;';
const grammar = Prism.languages.javascript;
const highlighted = Prism.highlight(code, grammar, 'javascript');
document.getElementById('output').innerHTML = highlighted;

Architecture

PrismJS is built around several key components:

Core Engine: The main Prism object providing highlighting functionality and utility methods
Language Grammars: Modular language definitions stored in Prism.languages that define syntax rules
Token System: Structured representation of parsed code as Token objects and token streams
Plugin System: Extensible architecture for additional features via Prism.plugins
Theme System: CSS-based themes for visual styling of highlighted code
Hook System: Event-driven system allowing plugins to integrate with the highlighting process

Capabilities

Core Highlighting

Main highlighting functions for automatic and manual syntax highlighting of code blocks and strings.

/**
 * Highlight all code elements on the page automatically
 * @param {boolean} [async=false] - Whether to use Web Workers for highlighting
 * @param {function} [callback] - Callback function invoked after highlighting
 */
Prism.highlightAll(async, callback);

/**
 * Highlight code inside a single element
 * @param {Element} element - Element containing code with language-* class
 * @param {boolean} [async=false] - Whether to use Web Workers 
 * @param {function} [callback] - Optional callback after highlighting
 */
Prism.highlightElement(element, async, callback);

/**
 * Low-level highlighting function for strings
 * @param {string} text - Code string to highlight
 * @param {object} grammar - Language grammar object
 * @param {string} language - Language identifier
 * @returns {string} HTML string with highlighted markup
 */
Prism.highlight(text, grammar, language);

/**
 * Tokenize code string into structured token stream
 * @param {string} text - Code string to tokenize
 * @param {object} grammar - Language grammar object  
 * @returns {Array} Array of strings and Token objects
 */
Prism.tokenize(text, grammar);

Core Highlighting

Language System

Grammar management and language definitions for syntax highlighting rules across 280+ supported languages.

/**
 * Object containing all loaded language grammars
 */
Prism.languages;

/**
 * Create new language by extending existing one
 * @param {string} id - Existing language ID to extend
 * @param {object} redef - New grammar rules to add/override
 * @returns {object} New language grammar object
 */
Prism.languages.extend(id, redef);

/**
 * Insert new grammar rules before existing ones
 * @param {string} inside - Target language ID
 * @param {string} before - Existing rule name to insert before
 * @param {object} insert - New rules to insert
 * @param {object} [root] - Root grammar object (defaults to Prism.languages)
 */
Prism.languages.insertBefore(inside, before, insert, root);

Language System

Token System

Object system for representing parsed code as structured tokens with type information and content.

/**
 * Constructor for token objects representing parsed code elements
 * @param {string} type - Token type (keyword, string, number, etc.)
 * @param {string|Array} content - Token content or nested tokens
 * @param {string|Array} [alias] - Additional CSS classes
 * @param {string} [matchedStr] - Original matched string
 * @constructor
 */
function Token(type, content, alias, matchedStr);

/**
 * Convert tokens to HTML string representation
 * @param {string|Token|Array} o - Token or token stream to stringify
 * @param {string} language - Language identifier for CSS classes
 * @returns {string} HTML markup string
 */
Token.stringify(o, language);

Token System

Plugin System

Extensible plugin architecture for adding features like line numbers, toolbars, and specialized highlighting.

/**
 * Object containing all loaded plugins
 */
Prism.plugins;

/**
 * Hook system for plugin integration
 */
Prism.hooks;

/**
 * Add hook callback for specific event
 * @param {string} name - Hook name (before-highlight, after-highlight, etc.)
 * @param {function} callback - Function to execute on hook
 */
Prism.hooks.add(name, callback);

/**
 * Run all callbacks for specific hook
 * @param {string} name - Hook name to execute
 * @param {object} env - Environment object passed to callbacks
 */
Prism.hooks.run(name, env);

Plugin System

Utility Functions

Helper functions for DOM manipulation, language detection, and object operations.

/**
 * Utility methods namespace
 */
Prism.util;

/**
 * Extract language from element's CSS classes
 * @param {Element} element - DOM element to check
 * @returns {string} Language identifier or 'none'
 */
Prism.util.getLanguage(element);

/**
 * Set language classes on element
 * @param {Element} element - DOM element to modify
 * @param {string} language - Language identifier
 */
Prism.util.setLanguage(element, language);

/**
 * Deep clone object with circular reference handling
 * @param {*} o - Object to clone
 * @param {WeakMap} [visited] - Visited objects map
 * @returns {*} Cloned object
 */
Prism.util.clone(o, visited);

/**
 * HTML encode tokens for safe output
 * @param {*} tokens - Tokens to encode
 * @returns {*} Encoded tokens
 */
Prism.util.encode(tokens);

Utilities

Global Configuration

/**
 * Prevent automatic highlighting on page load
 * @type {boolean}
 */
Prism.manual;

/**
 * Disable Web Worker message handler in worker contexts
 * @type {boolean} 
 */
Prism.disableWorkerMessageHandler;

Types

/**
 * Token representing a parsed code element
 * @typedef {Object} Token
 * @property {string} type - Token type identifier
 * @property {string|TokenStream} content - Token content
 * @property {string|string[]} alias - CSS class aliases
 * @property {number} length - Length of original matched string
 */

/**
 * Array of strings and Token objects representing parsed code
 * @typedef {Array<string|Token>} TokenStream
 */

/**
 * Grammar object defining language syntax rules
 * @typedef {Object} Grammar
 */

/**
 * Callback function for highlighting completion
 * @typedef {function} HighlightCallback
 * @param {Element} element - The highlighted element
 */