or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcore-highlighting.mdindex.mdlanguage-assets.mdlanguage-management.mdplugins.mdutilities.md
tile.json

tessl/npm-highlightjs--cdn-assets

Pre-compiled CDN assets for highlight.js syntax highlighting with language autodetection and theme support.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@highlightjs/cdn-assets@11.11.x

To install, run

npx @tessl/cli install tessl/npm-highlightjs--cdn-assets@11.11.0

index.mddocs/

Highlight.js CDN Assets

Highlight.js CDN Assets is a pre-compiled distribution package providing browser-optimized syntax highlighting for over 190 programming languages. It includes minified JavaScript files, modular language loading, extensive theme support, and both UMD and ES6 module formats for maximum compatibility across different development environments.

Package Information

  • Package Name: @highlightjs/cdn-assets
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: 
    npm install @highlightjs/cdn-assets
  • CDN: 
    https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/
  • License: BSD-3-Clause
  • Homepage: https://highlightjs.org/

Core Imports

UMD (Browser/CommonJS)

// Browser script tag
<script src="node_modules/@highlightjs/cdn-assets/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

// CommonJS
const hljs = require('@highlightjs/cdn-assets/highlight.min.js');

ES6 Modules

import hljs from '@highlightjs/cdn-assets/es/highlight.js';

// Import specific functions
import { highlight, highlightAuto, highlightAll } from '@highlightjs/cdn-assets/es/highlight.js';

CSS Themes

<link rel="stylesheet" href="node_modules/@highlightjs/cdn-assets/styles/default.css">

Basic Usage

import hljs from '@highlightjs/cdn-assets/es/highlight.js';

// Auto-highlight all code blocks on the page
hljs.highlightAll();

// Highlight specific code with language detection
const result = hljs.highlightAuto('console.log("Hello, World!");');
console.log(result.value); // HTML with syntax highlighting

// Highlight with specific language
const jsResult = hljs.highlight('console.log("Hello!");', { language: 'javascript' });
console.log(jsResult.value); // HTML with JavaScript syntax highlighting

// Highlight DOM element
const codeElement = document.querySelector('pre code');
hljs.highlightElement(codeElement);

Architecture

Highlight.js CDN Assets is organized around several key components:

  • Core Highlighting Engine: Main 
    hljs
    object with syntax parsing and HTML generation
  • Language Detection: Automatic language identification based on syntax patterns
  • Modular Languages: 192 individual language definition files for on-demand loading
  • Theme System: 160 CSS themes for different visual styles
  • Plugin Architecture: Extensible system for custom highlighting behavior
  • Multiple Formats: Both UMD and ES6 module builds for different environments

Capabilities

Core Highlighting

Essential highlighting functions for processing code with automatic or manual language detection.

function highlight(code: string, options: HighlightOptions): HighlightResult;
function highlight(languageName: string, code: string, ignoreIllegals?: boolean): HighlightResult; // deprecated
function highlightAuto(code: string, languageSubset?: string[]): AutoHighlightResult;
function highlightAll(): void;
function highlightElement(element: HTMLElement): void;

interface HighlightOptions {
  language: string;
  ignoreIllegals?: boolean;
}

interface HighlightResult {
  relevance: number;
  value: string;
  language?: string;
  illegal: boolean;
  errorRaised?: Error;
  secondBest?: Omit<HighlightResult, 'secondBest'>;
}

interface AutoHighlightResult extends HighlightResult {}

Core Highlighting

Language Management

Functions for managing available languages, registering custom languages, and working with language aliases.

function registerLanguage(languageName: string, language: LanguageFn): void;
function unregisterLanguage(languageName: string): void;
function listLanguages(): string[];
function getLanguage(languageName: string): Language | undefined;
function registerAliases(aliasList: string | string[], { languageName }: {languageName: string}): void;
function autoDetection(languageName: string): boolean;

type LanguageFn = (hljs: HLJSApi) => Language;

Language Management

Configuration and Initialization

Configuration options and initialization methods for customizing highlight.js behavior.

function configure(options: Partial<HLJSOptions>): void;
function initHighlighting(): void;
function initHighlightingOnLoad(): void;

interface HLJSOptions {
  noHighlightRe: RegExp;
  languageDetectRe: RegExp;
  classPrefix: string;
  cssSelector: string;
  languages?: string[];
  ignoreUnescapedHTML?: boolean;
  throwUnescapedHTML?: boolean;
}

Configuration

Plugin System

Extensible plugin architecture for customizing highlighting behavior and adding functionality.

function addPlugin(plugin: HLJSPlugin): void;
function removePlugin(plugin: HLJSPlugin): void;

interface HLJSPlugin {
  'after:highlight'?: (result: HighlightResult) => void;
  'before:highlight'?: (context: BeforeHighlightContext) => void;
  'after:highlightElement'?: (data: { el: Element, result: HighlightResult, text: string}) => void;
  'before:highlightElement'?: (data: { el: Element, language: string}) => void;
}

interface BeforeHighlightContext {
  code: string;
  language: string;
  result?: HighlightResult;
}

Plugin System

Language Assets

Individual language definition files and theme CSS files for modular loading.

// Language loading (browser)
const python = await import('@highlightjs/cdn-assets/languages/python.min.js');
hljs.registerLanguage('python', python.default);

// Theme loading (CSS)
<link rel="stylesheet" href="@highlightjs/cdn-assets/styles/github.css">

Language Assets

Utility Functions and Constants

Utility functions, regex helpers, and built-in mode constants for advanced usage.

function inherit<T>(original: T, ...args: Record<string, any>[]): T;
function newInstance(): HLJSApi;
function debugMode(): void;
function safeMode(): void;

const versionString: string;

// Regex utilities
const regex: {
  concat: (...args: (RegExp | string)[]) => string;
  lookahead: (re: RegExp | string) => string;
  either: (...args: (RegExp | string)[]) => string;
  optional: (re: RegExp | string) => string;
  anyNumberOfTimes: (re: RegExp | string) => string;
};

Utilities

Types

Core Interfaces

interface HLJSApi extends PublicApi, ModesAPI {}

interface Language extends LanguageDetail, Partial<Mode> {
  name?: string;
  unicodeRegex?: boolean;
  aliases?: string[];
  disableAutodetect?: boolean;
  contains: Mode[];
  case_insensitive?: boolean;
  keywords?: string | string[] | Record<string, string | string[] | RegExp>;
  isCompiled?: boolean;
  exports?: any;
  classNameAliases?: Record<string, string>;
}

interface Mode extends ModeCallbacks, ModeDetails {
  begin?: RegExp | string | (RegExp | string)[];
  match?: RegExp | string | (RegExp | string)[];
  end?: RegExp | string | (RegExp | string)[];
  scope?: string | Record<number, string>;
  contains?: ("self" | Mode)[];
  keywords?: string | string[] | Record<string, string | string[]>;
  relevance?: number;
  illegal?: string | RegExp | Array<string | RegExp>;
  subLanguage?: string | string[];
}