Core Highlighting

/**
 * 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 each element is highlighted
 */
Prism.highlightAll(async, callback);

// Basic automatic highlighting
Prism.highlightAll();

// Asynchronous highlighting with callback
Prism.highlightAll(true, function(element) {
    console.log('Highlighted:', element);
});

<pre><code class="language-javascript">
const message = "Hello, World!";
console.log(message);
</code></pre>

<script>
// Call after DOM is loaded
Prism.highlightAll();
</script>

/**
 * Highlight all descendants of container that have language-* classes
 * @param {Element} container - Root element to search under
 * @param {boolean} [async=false] - Whether to use Web Workers
 * @param {function} [callback] - Callback function invoked after each element
 */
Prism.highlightAllUnder(container, async, callback);

// Highlight only within a specific container
const codeContainer = document.getElementById('code-examples');
Prism.highlightAllUnder(codeContainer);

// With async and callback
Prism.highlightAllUnder(container, true, (element) => {
    element.classList.add('highlighted');
});

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

// Highlight single element
const codeBlock = document.querySelector('code.language-python');
Prism.highlightElement(codeBlock);

// With callback for post-processing
Prism.highlightElement(codeBlock, false, function(element) {
    // Add line numbers or other enhancements
    console.log('Element highlighted:', element);
});

// Asynchronous highlighting
Prism.highlightElement(codeBlock, true);

/**
 * Highlight a code string using specified grammar
 * @param {string} text - Code string to highlight
 * @param {object} grammar - Language grammar object from Prism.languages
 * @param {string} language - Language identifier for CSS classes
 * @returns {string} HTML string with syntax highlighting markup
 */
Prism.highlight(text, grammar, language);

// Basic string highlighting
const code = 'const greeting = "Hello, World!";';
const grammar = Prism.languages.javascript;
const highlighted = Prism.highlight(code, grammar, 'javascript');
console.log(highlighted);
// Output: '<span class="token keyword">const</span> greeting <span class="token operator">=</span> <span class="token string">"Hello, World!"</span><span class="token punctuation">;</span>'

// Dynamic highlighting with different languages
function highlightCode(code, lang) {
    if (Prism.languages[lang]) {
        return Prism.highlight(code, Prism.languages[lang], lang);
    } else {
        throw new Error(`Language "${lang}" not loaded`);
    }
}

const pythonCode = 'print("Hello, Python!")';
const highlighted = highlightCode(pythonCode, 'python');
document.getElementById('output').innerHTML = highlighted;

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

// Basic tokenization
const code = 'let count = 42;';
const tokens = Prism.tokenize(code, Prism.languages.javascript);

// Analyze tokens
tokens.forEach(token => {
    if (token instanceof Prism.Token) {
        console.log(`Token: ${token.type} = "${token.content}"`);
    } else {
        console.log(`Text: "${token}"`);
    }
});

// Advanced token processing
function extractIdentifiers(code, language) {
    const tokens = Prism.tokenize(code, Prism.languages[language]);
    const identifiers = [];
    
    function processTokens(tokens) {
        tokens.forEach(token => {
            if (token instanceof Prism.Token) {
                if (token.type === 'function' || token.type === 'variable') {
                    identifiers.push(token.content);
                }
                if (Array.isArray(token.content)) {
                    processTokens(token.content);
                }
            }
        });
    }
    
    processTokens(tokens);
    return identifiers;
}

// Available hooks during highlighting
Prism.hooks.add('before-highlightall', function(env) {
    // Modify elements before highlighting starts
    console.log('Starting to highlight:', env.selector);
});

Prism.hooks.add('before-sanity-check', function(env) {
    // Modify element/code before processing
    console.log('Processing element:', env.element);
});

Prism.hooks.add('before-highlight', function(env) {
    // Modify code/grammar before highlighting
    env.code = env.code.trim(); // Remove whitespace
});

Prism.hooks.add('after-highlight', function(env) {
    // Modify highlighted HTML
    console.log('Highlighted code:', env.highlightedCode);
});

Prism.hooks.add('complete', function(env) {
    // Final processing after DOM insertion
    console.log('Highlighting complete:', env.element);
});

// Check if language is available
function safeHighlight(code, language) {
    if (!Prism.languages[language]) {
        console.warn(`Language "${language}" not loaded`);
        return code; // Return original code
    }
    
    try {
        return Prism.highlight(code, Prism.languages[language], language);
    } catch (error) {
        console.error('Highlighting failed:', error);
        return code; // Fallback to original
    }
}

// Error handling with element highlighting
function highlightWithFallback(element) {
    try {
        Prism.highlightElement(element);
    } catch (error) {
        console.error('Failed to highlight element:', error);
        // Element remains unhighlighted but functional
    }
}

// Enable async highlighting
Prism.highlightAll(true);

// Web Workers require all language definitions in main prism.js
// Components loaded separately won't be available in workers

// Check worker support
if (typeof Worker !== 'undefined') {
    console.log('Web Workers supported');
} else {
    console.log('Falling back to synchronous highlighting');
}

// For large code blocks, use async highlighting
const largeCodeBlock = document.querySelector('.large-code');
if (largeCodeBlock.textContent.length > 10000) {
    Prism.highlightElement(largeCodeBlock, true);
}

// Batch highlighting for better performance
const codeBlocks = document.querySelectorAll('code[class*="language-"]');
if (codeBlocks.length > 50) {
    // Use async for many elements
    Prism.highlightAll(true);
} else {
    // Sync is fine for few elements
    Prism.highlightAll(false);
}