or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration-modes.mdcore-highlighting.mddom-integration.mdindex.mdlanguage-management.mdmodes-utilities.mdplugin-system.mdvue-integration.md
tile.json

index.mddocs/

Highlight.js

Highlight.js is a comprehensive syntax highlighting library written in JavaScript that works both in browsers and on servers. It provides automatic language detection capabilities and supports highlighting for over 190 programming languages and markup formats without requiring any framework dependencies.

Package Information

  • Package Name: highlight.js
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: 
    npm install highlight.js

Core Imports

import hljs from 'highlight.js';

For CommonJS:

const hljs = require('highlight.js');

ES6 Named imports:

import { highlight, highlightAuto, registerLanguage } from 'highlight.js';

Basic Usage

import hljs from 'highlight.js';

// Highlight code with automatic language detection
const result = hljs.highlightAuto('<h1>Hello World</h1>');
console.log(result.value); // Returns highlighted HTML

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

// Highlight all code blocks on a page (browser)
hljs.highlightAll();

Architecture

Highlight.js is built around several key components:

  • Core Engine: The main highlighting engine that processes code using compiled language grammars
  • Language Registry: System for registering and managing language definitions (192 built-in languages)
  • Mode System: Grammar definition system using modes, rules, and patterns for tokenization
  • Plugin System: Event-based plugin architecture for extending functionality
  • Emitter System: Token emission and HTML generation with customizable output formats
  • Regex Utilities: Helper functions for building complex regex patterns in language definitions

Capabilities

Core Highlighting

Core syntax highlighting functions for processing code strings and generating highlighted output. Includes both automatic language detection and manual language specification.

function highlight(code, options): HighlightResult;
function highlight(languageName, code, ignoreIllegals?): HighlightResult; // deprecated
function highlightAuto(code, languageSubset?): AutoHighlightResult;

Core Highlighting

DOM Integration

Browser-specific functions for highlighting HTML elements and integrating with web pages. Provides automatic discovery and highlighting of code blocks.

function highlightAll(): void;
function highlightElement(element): void;
function highlightBlock(element): void; // deprecated

DOM Integration

Language Management

Functions for registering, querying, and managing language definitions. Allows extending highlight.js with custom languages and aliases.

function registerLanguage(languageName, languageDefinition): void;
function unregisterLanguage(languageName): void;
function listLanguages(): string[];
function getLanguage(name): Language | undefined;
function registerAliases(aliasList, options): void;

Language Management

Configuration & Modes

Global configuration options and operational mode controls for customizing highlighting behavior, error handling, and output formatting.

function configure(options): void;
function debugMode(): void;
function safeMode(): void;
function newInstance(): HLJSApi;

Configuration & Modes

Plugin System

Event-based plugin system for extending highlight.js functionality with custom processing, formatting, and integration capabilities.

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

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

Plugin System

Built-in Modes & Utilities

Pre-built modes and utility functions for common programming language constructs, plus regex helper utilities for building custom language definitions.

// Common modes
const QUOTE_STRING_MODE: Mode;
const APOS_STRING_MODE: Mode;
const C_LINE_COMMENT_MODE: Mode;
const C_BLOCK_COMMENT_MODE: Mode;
const NUMBER_MODE: Mode;

// Utilities
function inherit(original, ...objects): T;
const regex: {
  concat(...args): string;
  either(...args): string;
  optional(re): string;
  lookahead(re): string;
  anyNumberOfTimes(re): string;
};

Built-in Modes & Utilities

Vue.js Integration

Vue.js plugin for seamless integration with Vue components and applications. Provides a standard Vue plugin interface for easy installation.

function vuePlugin(): VuePlugin;

interface VuePlugin {
  install: (vue: any) => void;
}

Vue Integration

Version and Utilities

Core utility functions and version information for debugging and compatibility checks.

const versionString: string;
function autoDetection(languageName: string): boolean;

Types

interface HighlightResult {
  code?: string;
  value: string;
  language?: string;
  relevance: number;
  illegal: boolean;
  errorRaised?: Error;
  secondBest?: Omit<HighlightResult, 'secondBest'>;
  // Internal properties (advanced usage)
  _illegalBy?: illegalData;
  _emitter: Emitter;
  _top?: Language | CompiledMode;
}

interface AutoHighlightResult extends HighlightResult {}

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

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

interface Language {
  name?: string;
  aliases?: string[];
  disableAutodetect?: boolean;
  contains: Mode[];
  case_insensitive?: boolean;
  keywords?: string | string[] | Record<string, string | string[]>;
  unicodeRegex?: boolean;
  rawDefinition?: () => Language;
  isCompiled?: boolean;
  exports?: any;
  classNameAliases?: Record<string, string>;
  compilerExtensions?: CompilerExt[];
  supersetOf?: string;
}

interface Mode {
  begin?: RegExp | string | (RegExp | string)[];
  match?: RegExp | string | (RegExp | string)[];
  end?: RegExp | string | (RegExp | string)[];
  scope?: string;
  className?: string; // deprecated, use scope
  beginScope?: string | Record<number, string>;
  endScope?: string | Record<number, string>;
  contains?: ('self' | Mode)[];
  keywords?: string | string[] | Record<string, string | string[]>;
  beginKeywords?: string;
  lexemes?: string | RegExp;
  relevance?: number;
  illegal?: string | RegExp | Array<string | RegExp>;
  endsParent?: boolean;
  endsWithParent?: boolean;
  endSameAsBegin?: boolean;
  skip?: boolean;
  excludeBegin?: boolean;
  excludeEnd?: boolean;
  returnBegin?: boolean;
  returnEnd?: boolean;
  parent?: Mode;
  starts?: Mode;
  variants?: Mode[];
  cachedVariants?: Mode[];
  subLanguage?: string | string[];
  label?: string;
  __beforeBegin?: Function;
}

// Advanced Types
interface Emitter {
  startScope(name: string): void;
  endScope(): void;
  addText(text: string): void;
  toHTML(): string;
  finalize(): void;
  __addSublanguage(emitter: Emitter, subLanguageName: string): void;
}

interface EmitterConstructor {
  new (opts: any): Emitter;
}

interface illegalData {
  message: string;
  context: string;
  index: number;
  resultSoFar: string;
  mode: CompiledMode;
}

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

interface CallbackResponse {
  data: Record<string, any>;
  ignoreMatch: () => void;
  isMatchIgnored: boolean;
}

type ModeCallback = (match: RegExpMatchArray, response: CallbackResponse) => void;
type CompilerExt = (mode: Mode, parent: Mode | Language | null) => void;
type HighlightedHTMLElement = HTMLElement & {
  result?: object;
  secondBest?: object;
  parentNode: HTMLElement;
};

// Compiled Types (for advanced language development)
interface CompiledMode extends Omit<Mode, 'contains'> {
  begin?: RegExp | string;
  end?: RegExp | string;
  scope?: string;
  contains: CompiledMode[];
  keywords: Record<string, any>;
  data: Record<string, any>;
  terminatorEnd: string;
  keywordPatternRe: RegExp;
  beginRe: RegExp;
  endRe: RegExp;
  illegalRe: RegExp;
  matcher: any;
  isCompiled: true;
  starts?: CompiledMode;
  parent?: CompiledMode;
  beginScope?: CompiledScope;
  endScope?: CompiledScope;
}

interface CompiledLanguage extends Language, CompiledMode {
  isCompiled: true;
  contains: CompiledMode[];
  keywords: Record<string, any>;
}

type CompiledScope = Record<number, string> & {
  _emit?: Record<number, boolean>;
  _multi?: boolean;
  _wrap?: string;
};