Syntax highlighting with language autodetection for web browsers and server-side applications
npx @tessl/cli install tessl/npm-highlight-js@10.7.0Highlight.js is a syntax highlighter written in JavaScript that works in web browsers and server-side environments. It provides automatic language detection, supports over 180+ programming languages, requires no external dependencies, and offers extensive customization through themes and plugins.
npm install highlight.js// Full library with all languages
import hljs from "highlight.js";For smaller bundle size, import core library and register languages individually:
// Core library only
import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";
import python from "highlight.js/lib/languages/python";
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('python', python);CommonJS:
const hljs = require('highlight.js');
// or
const hljs = require('highlight.js/lib/core');
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));import hljs from "highlight.js";
// Automatically highlight all <pre><code> blocks on the page
hljs.highlightAll();
// Highlight specific code with manual language selection
const result = hljs.highlight('console.log("Hello, world!");', {language: 'javascript'});
console.log(result.value); // HTML string with highlighting
// Auto-detect language and highlight
const autoResult = hljs.highlightAuto('console.log("Hello, world!");');
console.log(autoResult.language); // 'javascript'
console.log(autoResult.value); // HTML string with highlighting
// Highlight a specific HTML element
const codeElement = document.querySelector('pre code');
hljs.highlightElement(codeElement);Highlight.js is built around several key components:
Core highlighting functionality for manual and automatic code highlighting with language detection and customizable options.
function highlight(
codeOrLanguageName: string,
optionsOrCode: string | HighlightOptions,
ignoreIllegals?: boolean,
continuation?: Mode
): HighlightResult;
function highlightAuto(code: string, languageSubset?: string[]): AutoHighlightResult;
function highlightAll(): void;
function highlightElement(element: HTMLElement): void;
function highlightBlock(element: HTMLElement): void; // deprecated
interface HighlightOptions {
language: string;
ignoreIllegals?: boolean;
}
interface HighlightResult {
relevance: number;
value: string;
language?: string;
emitter: Emitter;
illegal: boolean;
top?: Language | CompiledMode;
illegalBy?: illegalData;
sofar?: string;
errorRaised?: Error;
second_best?: Omit<HighlightResult, 'second_best'>;
code?: string;
}
interface AutoHighlightResult extends HighlightResult {}Language registration, discovery, and management functionality for working with the 191+ supported programming languages.
function registerLanguage(languageName: string, language: LanguageFn): void;
function unregisterLanguage(languageName: string): void;
function listLanguages(): string[];
function getLanguage(languageName: string): Language | undefined;
function requireLanguage(languageName: string): Language | never; // deprecated
function registerAliases(aliasList: string | string[], {languageName}: {languageName: string}): void;
function autoDetection(languageName: string): boolean;
type LanguageFn = (hljs?: HLJSApi) => Language;Configuration system for customizing highlighting behavior, CSS classes, and processing options.
function configure(options: Partial<HLJSOptions>): void;
function initHighlighting(): void;
function initHighlightingOnLoad(): void;
interface HLJSOptions {
noHighlightRe: RegExp;
languageDetectRe: RegExp;
classPrefix: string;
tabReplace?: string;
useBR: boolean;
languages?: string[];
__emitter: EmitterConstructor;
}Pre-built syntax pattern definitions and utilities for creating language definitions and custom highlighting rules.
function SHEBANG(mode?: Partial<Mode> & {binary?: string | RegExp}): Mode;
function COMMENT(begin: string | RegExp, end: string | RegExp, modeOpts?: Mode): Mode;
function END_SAME_AS_BEGIN(mode: Mode): Mode;
// Pre-built mode constants
const BACKSLASH_ESCAPE: Mode;
const QUOTE_STRING_MODE: Mode;
const APOS_STRING_MODE: Mode;
const C_LINE_COMMENT_MODE: Mode;
const C_BLOCK_COMMENT_MODE: Mode;
const HASH_COMMENT_MODE: Mode;
const NUMBER_MODE: Mode;
const C_NUMBER_MODE: Mode;
const BINARY_NUMBER_MODE: Mode;
const CSS_NUMBER_MODE: Mode;
const REGEXP_MODE: Mode;
const TITLE_MODE: Mode;
const UNDERSCORE_TITLE_MODE: Mode;
const METHOD_GUARD: Mode;
// Regular expression constants
const IDENT_RE: string;
const UNDERSCORE_IDENT_RE: string;
const MATCH_NOTHING_RE: string;
const NUMBER_RE: string;
const C_NUMBER_RE: string;
const BINARY_NUMBER_RE: string;
const RE_STARTERS_RE: string;Plugin architecture for extending highlight.js functionality with custom processing hooks and integrations.
function addPlugin(plugin: HLJSPlugin): void;
function vuePlugin(): VuePlugin;
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;
'after:highlightBlock'?: (data: {block: Element, result: HighlightResult, text: string}) => void;
'before:highlightBlock'?: (data: {block: Element, language: string}) => void;
}
interface BeforeHighlightContext {
code: string;
language: string;
result?: HighlightResult;
}
interface VuePlugin {
install: (vue: any) => void;
}Utility functions, debugging tools, and legacy API support for advanced usage and troubleshooting.
function inherit<T>(original: T, ...args: Record<string, any>[]): T;
function fixMarkup(html: string): string; // deprecated
function debugMode(): void;
function safeMode(): void;
const versionString: string;interface Mode {
begin?: RegExp | string;
match?: RegExp | string;
end?: RegExp | string;
className?: string;
contains?: ("self" | Mode)[];
endsParent?: boolean;
endsWithParent?: boolean;
endSameAsBegin?: boolean;
skip?: boolean;
excludeBegin?: boolean;
excludeEnd?: boolean;
returnBegin?: boolean;
returnEnd?: boolean;
starts?: Mode;
lexemes?: string | RegExp;
keywords?: Record<string, any> | string;
beginKeywords?: string;
relevance?: number;
illegal?: string | RegExp | Array<string | RegExp>;
variants?: Mode[];
subLanguage?: string | string[];
}
interface Language {
name?: string;
aliases?: string[];
disableAutodetect?: boolean;
contains: Mode[];
case_insensitive?: boolean;
keywords?: Record<string, any> | string;
classNameAliases?: Record<string, string>;
supersetOf?: string;
}
interface CompiledLanguage extends Language {
isCompiled: true;
contains: CompiledMode[];
keywords: Record<string, any>;
}
interface CompiledMode extends Mode {
contains: CompiledMode[];
keywords: Record<string, [string, number]>;
isCompiled: true;
matcher: any;
}
interface illegalData {
msg: string;
context: string;
mode: CompiledMode;
}
interface Emitter {
addKeyword(text: string, kind: string): void;
addText(text: string): void;
toHTML(): string;
finalize(): void;
closeAllNodes(): void;
openNode(kind: string): void;
closeNode(): void;
addSublanguage(emitter: Emitter, subLanguageName: string): void;
}
interface EmitterConstructor {
new (opts: any): Emitter;
}
interface CallbackResponse {
data: Record<string, any>;
ignoreMatch: () => void;
isMatchIgnored: boolean;
}