CtrlK
BlogDocsLog inGet started
Tessl Logo

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

Overview
Eval results
Files

language-system.mddocs/

Language System

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.

Capabilities

Language Object

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

/**
 * Object containing all loaded language grammars
 * @type {Object<string, Grammar>}
 */
Prism.languages;

Usage Examples:

// Access loaded languages
console.log(Object.keys(Prism.languages));
// Output: ['markup', 'css', 'clike', 'javascript', ...]

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

// Get grammar for highlighting
const jsGrammar = Prism.languages.javascript;
const highlighted = Prism.highlight('const x = 1;', jsGrammar, 'javascript');

Built-in Languages

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

/**
 * HTML/XML markup language grammar
 * @type {Grammar}
 */
Prism.languages.markup;

/**
 * CSS language grammar
 * @type {Grammar}
 */
Prism.languages.css;

/**
 * C-like language base grammar
 * @type {Grammar}
 */
Prism.languages.clike;

/**
 * JavaScript language grammar
 * @type {Grammar}
 */
Prism.languages.javascript;

Language Aliases:

// Common aliases are automatically set up
Prism.languages.html === Prism.languages.markup; // true
Prism.languages.xml === Prism.languages.markup;  // true
Prism.languages.svg === Prism.languages.markup;  // true
Prism.languages.js === Prism.languages.javascript; // true

Language Extension

extend

Create new language definitions by extending existing ones.

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

Usage Examples:

// Extend JavaScript for JSX
Prism.languages.jsx = Prism.languages.extend('javascript', {
    'tag': {
        pattern: /<\/?(?:[\w.:-]+(?:\s+(?:[\w.:-]+(?:=(?:"[^"]*"|'[^']*'|[^\s'">=]+))?)\s*)*\/?)?>|</,
        inside: {
            'tag-name': /^<\/?[\w.:-]+/,
            'attr-name': /[\w.:-]+(?=\s*=)/,
            'attr-value': /=(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
            'punctuation': /[=<>\/]/
        }
    }
});

// Extend CSS for SCSS
Prism.languages.scss = Prism.languages.extend('css', {
    'variable': /\$[\w-]+/,
    'at-rule': {
        pattern: /@[\w-]+(?:\([^)]*\))?(?=\s*{)/,
        inside: {
            'punctuation': /[()]/
        }
    }
});

// Create TypeScript by extending JavaScript  
Prism.languages.typescript = Prism.languages.extend('javascript', {
    'keyword': [
        /\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/
    ],
    'type-annotation': {
        pattern: /:\s*[a-zA-Z_][\w<>[\],.]*/, 
        inside: {
            'punctuation': /:/
        }
    }
});

insertBefore

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

/**
 * Insert new grammar rules before existing rule
 * @param {string} inside - Target language ID to modify
 * @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);

Usage Examples:

// Add template literals to JavaScript before strings
Prism.languages.insertBefore('javascript', 'string', {
    'template-string': {
        pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,
        greedy: true,
        inside: {
            'template-interpolation': {
                pattern: /\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,
                inside: {
                    'interpolation-punctuation': {
                        pattern: /^\${|}$/,
                        alias: 'punctuation'
                    },
                    rest: Prism.languages.javascript
                }
            },
            'string': /[\s\S]+/
        }
    }
});

// Add JSDoc comments before regular comments
Prism.languages.insertBefore('javascript', 'comment', {
    'jsdoc': {
        pattern: /\/\*\*[\s\S]*?\*\//,
        inside: {
            'tag': /@\w+/,
            'parameter': /\{[^}]+\}/
        }
    }
});

// Modify existing language in place
Prism.languages.insertBefore('css', 'property', {
    'custom-property': {
        pattern: /--[\w-]+/,
        alias: 'variable'
    }
});

Grammar Traversal

DFS

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

/**
 * Perform depth-first search on grammar object
 * @param {object} o - Grammar object to traverse
 * @param {function} callback - Function called for each node
 * @param {string|function} [type] - Type filter or type function
 * @param {WeakMap} [visited] - Visited objects map for circular reference handling
 */
Prism.languages.DFS(o, callback, type, visited);

Usage Examples:

// Find all string patterns in a grammar
const stringPatterns = [];
Prism.languages.DFS(Prism.languages.javascript, function(key, value) {
    if (key === 'pattern' && value instanceof RegExp) {
        stringPatterns.push(value);
    }
});

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

// Count different token types in a grammar
const tokenCounts = {};
Prism.languages.DFS(Prism.languages.python, function(key, value, type) {
    if (typeof key === 'string' && typeof value === 'object' && value.pattern) {
        tokenCounts[key] = (tokenCounts[key] || 0) + 1;
    }
});

Component Loading (Node.js)

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

/**
 * Load language components dynamically (Node.js only)
 * @param {string|string[]} [languages] - Language IDs to load, or all if undefined
 */
const loadLanguages = require('prismjs/components/');
loadLanguages(languages);

/**
 * Suppress warning messages during loading
 * @type {boolean}
 */
loadLanguages.silent;

Usage Examples:

const loadLanguages = require('prismjs/components/');

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

// Load all available languages
loadLanguages();

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

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

// Check what languages are available
const components = require('prismjs/components.js');
console.log(Object.keys(components.languages));

Available Languages

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

Programming Languages

// Popular programming languages
Prism.languages.javascript  // JavaScript/ECMAScript
Prism.languages.typescript  // TypeScript
Prism.languages.python      // Python  
Prism.languages.java        // Java
Prism.languages.csharp      // C#
Prism.languages.cpp         // C++
Prism.languages.c           // C
Prism.languages.php         // PHP
Prism.languages.ruby        // Ruby
Prism.languages.go          // Go
Prism.languages.rust        // Rust
Prism.languages.swift       // Swift
Prism.languages.kotlin      // Kotlin
Prism.languages.scala       // Scala

Web Technologies

// Web markup and styling
Prism.languages.html        // HTML (alias for markup)
Prism.languages.css         // CSS
Prism.languages.scss        // Sass/SCSS
Prism.languages.less        // Less CSS
Prism.languages.stylus      // Stylus
Prism.languages.xml         // XML
Prism.languages.svg         // SVG

Data Formats

// Configuration and data formats
Prism.languages.json        // JSON
Prism.languages.yaml        // YAML
Prism.languages.toml        // TOML
Prism.languages.ini         // INI files
Prism.languages.properties  // Properties files
Prism.languages.csv         // CSV

Query Languages

// Database and query languages
Prism.languages.sql         // SQL
Prism.languages.mongodb     // MongoDB queries
Prism.languages.graphql     // GraphQL
Prism.languages.sparql      // SPARQL

Shell and Config

// Shell and system languages
Prism.languages.bash        // Bash shell
Prism.languages.powershell  // PowerShell
Prism.languages.batch       // Windows Batch
Prism.languages.dockerfile  // Docker files
Prism.languages.nginx       // Nginx config

Language Dependencies

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

// Dependencies are handled automatically
loadLanguages(['jsx']);        // Loads javascript first
loadLanguages(['typescript']); // Loads javascript first  
loadLanguages(['scss']);       // Loads css first
loadLanguages(['php']);        // Loads markup first for embedded HTML

Custom Language Definition

// Define a custom language
Prism.languages.mylang = {
    'comment': /\/\/.*$/m,
    'string': /"(?:[^"\\]|\\.)*"/,
    'number': /\b\d+\.?\d*\b/,
    'keyword': /\b(?:if|else|while|function|return)\b/,
    'operator': /[+\-*\/=<>!]/,
    'punctuation': /[{}();,]/
};

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

Grammar Structure

Language grammars are objects with token definitions:

/**
 * Grammar object structure
 * @typedef {Object} Grammar
 * @property {RegExp|Object} [tokenName] - Token definition with pattern and options
 */

// Example grammar structure
const exampleGrammar = {
    'comment': {
        pattern: /\/\*[\s\S]*?\*\/|\/\/.*$/m,
        greedy: true
    },
    'string': {
        pattern: /"(?:[^"\\]|\\.)*"/,
        greedy: true
    },
    'keyword': /\b(?:if|else|function|return)\b/,
    'number': /\b\d+\.?\d*\b/,
    'operator': /[=+\-*\/]/,
    'punctuation': /[{}();,]/
};

Error Handling

// Safe language access
function getLanguage(langId) {
    if (Prism.languages[langId]) {
        return Prism.languages[langId];
    } else {
        console.warn(`Language '${langId}' not found`);
        return Prism.languages.plain || {};
    }
}

// Language loading error handling
try {
    loadLanguages(['python']);
    console.log('Python loaded successfully');
} catch (error) {
    console.error('Failed to load Python:', error);
}

Install with Tessl CLI

npx tessl i tessl/npm-prismjs

docs

core-highlighting.md

index.md

language-system.md

plugin-system.md

token-system.md

utilities.md

tile.json