highlight
PoolZero-dependency syntax highlighter - Fast, modern, tree-shakeable with React adapter and auto-scan support
dist
Functions
function tokenize(code: string, grammar: Grammar): Token[]
Tokenize source code using a grammar definition.
| Parameter | Type | Description |
|---|---|---|
code | string | - The source code to tokenize |
grammar | Grammar | - The grammar definition to use |
function getPlainText(tokens: Token[]): string
Get the plain text from an array of tokens.
| Parameter | Type | Description |
|---|---|---|
tokens | Token[] |
function createRegistry(grammars: Grammar[]): Map<string, Grammar>
Create a grammar registry from an array of grammars.
| Parameter | Type | Description |
|---|---|---|
grammars | Grammar[] |
function renderToHTML(tokens: Token[], options?: RenderOptions): string
Render tokens to an HTML string.
| Parameter | Type | Description |
|---|---|---|
tokens | Token[] | - Array of tokens from the tokenizer |
optionsoptional | RenderOptions | - Rendering options (theme, line numbers, etc.) |
function getThemeStylesheet(theme: Theme | string, classPrefix?: string): string
Generate a complete CSS stylesheet for a theme. Useful for SSR or injecting into <style> tags.
| Parameter | Type | Description |
|---|---|---|
theme | Theme | string | |
classPrefixoptional | string |
function registerTheme(theme: Theme): void
Register a theme for name-based lookup.
| Parameter | Type | Description |
|---|---|---|
theme | Theme |
function registerThemes(themes: Theme[]): void
Register multiple themes.
| Parameter | Type | Description |
|---|---|---|
themes | Theme[] |
function getTheme(name: string): Theme | undefined
Get a theme by name from the registry.
| Parameter | Type | Description |
|---|---|---|
name | string |
function resolveTheme(theme: Theme | string): Theme | undefined
Resolve a theme — accepts either a Theme object or a string name. Returns the theme object, or undefined if not found.
| Parameter | Type | Description |
|---|---|---|
theme | Theme | string |
function getThemeCSS(theme: Theme, classPrefix?: string): string
Generate CSS string for a theme using CSS custom properties.
| Parameter | Type | Description |
|---|---|---|
theme | Theme | |
classPrefixoptional | string |
function getDualThemeStylesheet(lightTheme: Theme, darkTheme: Theme, options?: {
darkSelector?: string;
classPrefix?: string;
}): stringGenerate a dual-theme stylesheet that switches between light and dark themes.
| Parameter | Type | Description |
|---|---|---|
lightTheme | Theme | - Theme for light mode |
darkTheme | Theme | - Theme for dark mode |
optionsoptional | {
darkSelector?: string;
classPrefix?: string;
} | - Configuration options |
function applyTheme(theme: Theme | string, classPrefix?: string): (() => void) | undefined
Apply a theme by injecting a <style> tag into the document. Returns a cleanup function to remove the style element.
| Parameter | Type | Description |
|---|---|---|
theme | Theme | string | - Theme object or name |
classPrefixoptional | string | - CSS class prefix |
function resolveGrammar(language: string, grammars: Grammar[]): Grammar | null
Resolve a language string to a grammar by checking name and aliases.
| Parameter | Type | Description |
|---|---|---|
language | string | - Language string (e.g., "js", "python", "ts") |
grammars | Grammar[] | - Array of available grammars |
function clearDetectCache(): void
Clear the detection cache.
function scoreTokenization(tokens: Token[], codeLength: number): number
Score a tokenization result for how well a grammar matches the code.
| Parameter | Type | Description |
|---|---|---|
tokens | Token[] | - Tokenized output |
codeLength | number | - Length of the original code |
function detectLanguage(code: string, grammars: Grammar[], options?: DetectOptions): DetectResult | undefined
Detect the most likely language for a code snippet.
| Parameter | Type | Description |
|---|---|---|
code | string | - Source code to analyze |
grammars | Grammar[] | - Array of candidate grammars |
optionsoptional | DetectOptions | - Detection options |
function hexToRGB(hex: string): [number, number, number]
Parse hex color to RGB values
| Parameter | Type | Description |
|---|---|---|
hex | string |
function relativeLuminance(r: number, g: number, b: number): number
Calculate relative luminance per WCAG 2.0 https://www.w3.org/TR/WCAG20/#relativeluminancedef
| Parameter | Type | Description |
|---|---|---|
r | number | |
g | number | |
b | number |
function contrastRatio(color1: string, color2: string): number
Calculate contrast ratio between two colors Returns a value between 1 and 21
| Parameter | Type | Description |
|---|---|---|
color1 | string | |
color2 | string |
function meetsWCAG_AA(foreground: string, background: string, isLargeText?: boolean): boolean
Check if a color pair meets WCAG AA requirements
| Parameter | Type | Description |
|---|---|---|
foreground | string | - Foreground hex color |
background | string | - Background hex color |
isLargeTextoptional | boolean | - Whether the text is large (>=18px or >=14px bold) |
function validateThemeContrast(theme: Theme, minRatio?: number): ThemeContrastReport
Validate all token colors in a theme against WCAG AA contrast requirements
| Parameter | Type | Description |
|---|---|---|
theme | Theme | - Theme to validate |
minRatiooptional | number | - Minimum contrast ratio (default: 4.5 for normal text) |
dist/copy-button-Bg11699i
Functions
function scan(options: ScanOptions): number
Scan a container for code elements and highlight them.
| Parameter | Type | Description |
|---|---|---|
options | ScanOptions | - Scan options |
function observe(options: ScanOptions): () => void
Observe a container for new code elements and highlight them automatically. Uses MutationObserver for dynamic content (SPA routing, lazy loading, etc.).
| Parameter | Type | Description |
|---|---|---|
options | ScanOptions | - Scan options (observe option is ignored) |
function autoHighlight(options: ScanOptions): () => void
Auto-highlight: scan and optionally observe for new code blocks. Convenience function combining scan() and observe().
| Parameter | Type | Description |
|---|---|---|
options | ScanOptions | - Scan options |
function renderCopyButton(code: string, options?: CopyButtonOptions): string
Render a copy button HTML string. The button stores the code in a `data-code` attribute.
| Parameter | Type | Description |
|---|---|---|
code | string | - The raw code to be copied |
optionsoptional | CopyButtonOptions | - Button options |
function initCopyButtons(container?: Element | undefined, classPrefix?: string): () => void
Initialize click handlers for all copy buttons within a container. Finds all buttons with the `neo-hl-copy-button` class and wires up click events.
| Parameter | Type | Description |
|---|---|---|
containeroptional | Element | undefined | - Container element to search in (default: document.body) |
classPrefixoptional | string | - CSS class prefix (default: "neo-hl") |
dist/copy-button-CFzvI03Z
Functions
function scan(options: ScanOptions): number
Scan a container for code elements and highlight them.
| Parameter | Type | Description |
|---|---|---|
options | ScanOptions | - Scan options |
function observe(options: ScanOptions): () => void
Observe a container for new code elements and highlight them automatically. Uses MutationObserver for dynamic content (SPA routing, lazy loading, etc.).
| Parameter | Type | Description |
|---|---|---|
options | ScanOptions | - Scan options (observe option is ignored) |
function autoHighlight(options: ScanOptions): () => void
Auto-highlight: scan and optionally observe for new code blocks. Convenience function combining scan() and observe().
| Parameter | Type | Description |
|---|---|---|
options | ScanOptions | - Scan options |
function renderCopyButton(code: string, options?: CopyButtonOptions): string
Render a copy button HTML string. The button stores the code in a `data-code` attribute.
| Parameter | Type | Description |
|---|---|---|
code | string | - The raw code to be copied |
optionsoptional | CopyButtonOptions | - Button options |
function initCopyButtons(container?: Element | undefined, classPrefix?: string): () => void
Initialize click handlers for all copy buttons within a container. Finds all buttons with the `neo-hl-copy-button` class and wires up click events.
| Parameter | Type | Description |
|---|---|---|
containeroptional | Element | undefined | - Container element to search in (default: document.body) |
classPrefixoptional | string | - CSS class prefix (default: "neo-hl") |
dist/grammars/bash
Variables
Grammardist/grammars/bash
Variables
Grammardist/grammars/c
Variables
Grammardist/grammars/c
Variables
Grammardist/grammars/cpp
Variables
Grammardist/grammars/cpp
Variables
Grammardist/grammars/csharp
Variables
Grammardist/grammars/csharp
Variables
Grammardist/grammars/css
Variables
Grammardist/grammars/css
Variables
Grammardist/grammars/diff
Variables
Grammardist/grammars/diff
Variables
Grammardist/grammars/docker
Variables
Grammardist/grammars/docker
Variables
Grammardist/grammars/go
Variables
Grammardist/grammars/go
Variables
Grammardist/grammars/graphql
Variables
Grammardist/grammars/graphql
Variables
Grammardist/grammars/html
Variables
Grammardist/grammars/html
Variables
Grammardist/grammars/ini
Variables
Grammardist/grammars/ini
Variables
Grammardist/grammars/java
Variables
Grammardist/grammars/java
Variables
Grammardist/grammars/javascript
Variables
Grammardist/grammars/javascript
Variables
Grammardist/grammars/json
Variables
Grammardist/grammars/json
Variables
Grammardist/grammars/jsx
Variables
Grammardist/grammars/jsx
Variables
Grammardist/grammars/kotlin
Variables
Grammardist/grammars/kotlin
Variables
Grammardist/grammars/markdown
Variables
Grammardist/grammars/markdown
Variables
Grammardist/grammars/php
Variables
Grammardist/grammars/php
Variables
Grammardist/grammars/python
Variables
Grammardist/grammars/python
Variables
Grammardist/grammars/regex
Variables
Grammardist/grammars/regex
Variables
Grammardist/grammars/ruby
Variables
Grammardist/grammars/ruby
Variables
Grammardist/grammars/rust
Variables
Grammardist/grammars/rust
Variables
Grammardist/grammars/scss
Variables
Grammardist/grammars/scss
Variables
Grammardist/grammars/shell
Variables
Grammardist/grammars/shell
Variables
Grammardist/grammars/sql
Variables
Grammardist/grammars/sql
Variables
Grammardist/grammars/swift
Variables
Grammardist/grammars/swift
Variables
Grammardist/grammars/toml
Variables
Grammardist/grammars/toml
Variables
Grammardist/grammars/tsx
Variables
Grammardist/grammars/tsx
Variables
Grammardist/grammars/typescript
Variables
Grammardist/grammars/typescript
Variables
Grammardist/grammars/yaml
Variables
Grammardist/grammars/yaml
Variables
Grammardist
Functions
function tokenize(code: string, grammar: Grammar): Token[]
Tokenize source code using a grammar definition.
| Parameter | Type | Description |
|---|---|---|
code | string | - The source code to tokenize |
grammar | Grammar | - The grammar definition to use |
function getPlainText(tokens: Token[]): string
Get the plain text from an array of tokens.
| Parameter | Type | Description |
|---|---|---|
tokens | Token[] |
function createRegistry(grammars: Grammar[]): Map<string, Grammar>
Create a grammar registry from an array of grammars.
| Parameter | Type | Description |
|---|---|---|
grammars | Grammar[] |
function renderToHTML(tokens: Token[], options?: RenderOptions): string
Render tokens to an HTML string.
| Parameter | Type | Description |
|---|---|---|
tokens | Token[] | - Array of tokens from the tokenizer |
optionsoptional | RenderOptions | - Rendering options (theme, line numbers, etc.) |
function getThemeStylesheet(theme: Theme | string, classPrefix?: string): string
Generate a complete CSS stylesheet for a theme. Useful for SSR or injecting into <style> tags.
| Parameter | Type | Description |
|---|---|---|
theme | Theme | string | |
classPrefixoptional | string |
function registerTheme(theme: Theme): void
Register a theme for name-based lookup.
| Parameter | Type | Description |
|---|---|---|
theme | Theme |
function registerThemes(themes: Theme[]): void
Register multiple themes.
| Parameter | Type | Description |
|---|---|---|
themes | Theme[] |
function getTheme(name: string): Theme | undefined
Get a theme by name from the registry.
| Parameter | Type | Description |
|---|---|---|
name | string |
function resolveTheme(theme: Theme | string): Theme | undefined
Resolve a theme — accepts either a Theme object or a string name. Returns the theme object, or undefined if not found.
| Parameter | Type | Description |
|---|---|---|
theme | Theme | string |
function getThemeCSS(theme: Theme, classPrefix?: string): string
Generate CSS string for a theme using CSS custom properties.
| Parameter | Type | Description |
|---|---|---|
theme | Theme | |
classPrefixoptional | string |
function getDualThemeStylesheet(lightTheme: Theme, darkTheme: Theme, options?: {
darkSelector?: string;
classPrefix?: string;
}): stringGenerate a dual-theme stylesheet that switches between light and dark themes.
| Parameter | Type | Description |
|---|---|---|
lightTheme | Theme | - Theme for light mode |
darkTheme | Theme | - Theme for dark mode |
optionsoptional | {
darkSelector?: string;
classPrefix?: string;
} | - Configuration options |
function applyTheme(theme: Theme | string, classPrefix?: string): (() => void) | undefined
Apply a theme by injecting a <style> tag into the document. Returns a cleanup function to remove the style element.
| Parameter | Type | Description |
|---|---|---|
theme | Theme | string | - Theme object or name |
classPrefixoptional | string | - CSS class prefix |
function resolveGrammar(language: string, grammars: Grammar[]): Grammar | null
Resolve a language string to a grammar by checking name and aliases.
| Parameter | Type | Description |
|---|---|---|
language | string | - Language string (e.g., "js", "python", "ts") |
grammars | Grammar[] | - Array of available grammars |
function clearDetectCache(): void
Clear the detection cache.
function scoreTokenization(tokens: Token[], codeLength: number): number
Score a tokenization result for how well a grammar matches the code.
| Parameter | Type | Description |
|---|---|---|
tokens | Token[] | - Tokenized output |
codeLength | number | - Length of the original code |
function detectLanguage(code: string, grammars: Grammar[], options?: DetectOptions): DetectResult | undefined
Detect the most likely language for a code snippet.
| Parameter | Type | Description |
|---|---|---|
code | string | - Source code to analyze |
grammars | Grammar[] | - Array of candidate grammars |
optionsoptional | DetectOptions | - Detection options |
function hexToRGB(hex: string): [number, number, number]
Parse hex color to RGB values
| Parameter | Type | Description |
|---|---|---|
hex | string |
function relativeLuminance(r: number, g: number, b: number): number
Calculate relative luminance per WCAG 2.0 https://www.w3.org/TR/WCAG20/#relativeluminancedef
| Parameter | Type | Description |
|---|---|---|
r | number | |
g | number | |
b | number |
function contrastRatio(color1: string, color2: string): number
Calculate contrast ratio between two colors Returns a value between 1 and 21
| Parameter | Type | Description |
|---|---|---|
color1 | string | |
color2 | string |
function meetsWCAG_AA(foreground: string, background: string, isLargeText?: boolean): boolean
Check if a color pair meets WCAG AA requirements
| Parameter | Type | Description |
|---|---|---|
foreground | string | - Foreground hex color |
background | string | - Background hex color |
isLargeTextoptional | boolean | - Whether the text is large (>=18px or >=14px bold) |
function validateThemeContrast(theme: Theme, minRatio?: number): ThemeContrastReport
Validate all token colors in a theme against WCAG AA contrast requirements
| Parameter | Type | Description |
|---|---|---|
theme | Theme | - Theme to validate |
minRatiooptional | number | - Minimum contrast ratio (default: 4.5 for normal text) |
dist/react
Functions
function Highlight({ children, language, theme: themeProp, showLineNumbers, highlightLines, diffHighlight, copyButton, copyButtonLabel, copyButtonCopiedLabel, onCopy, classPrefix: classPrefixProp, className, style, }: HighlightProps): react_jsx_runtime.JSX.ElementComponent-mode syntax highlighter. Usage: ```tsx <Highlight language={javascript} theme="github-dark"> {`const x = 42;`} </Highlight> ```
| Parameter | Type | Description |
|---|---|---|
{ children, language, theme: themeProp, showLineNumbers, highlightLines, diffHighlight, copyButton, copyButtonLabel, copyButtonCopiedLabel, onCopy, classPrefix: classPrefixProp, className, style, } | HighlightProps |
function AutoHighlight({ children, languages: languagesProp, theme: themeProp, selector, lineNumbers: lineNumbersProp, classPrefix: classPrefixProp, className, style, autoDetect, }: AutoHighlightProps): react_jsx_runtime.JSX.ElementAuto-scan component that highlights all `<code>` elements within its children. Uses MutationObserver to watch for dynamically added content. Usage: ```tsx <AutoHighlight languages={[javascript, python]} theme="github-dark"> <article dangerouslySetInnerHTML={{ __html: markdownHtml }} /> </AutoHighlight> ```
| Parameter | Type | Description |
|---|---|---|
{ children, languages: languagesProp, theme: themeProp, selector, lineNumbers: lineNumbersProp, classPrefix: classPrefixProp, className, style, autoDetect, } | AutoHighlightProps |
function useHighlight(code: string, language: Grammar, options?: UseHighlightOptions): UseHighlightResult
Hook for syntax highlighting. Returns memoized tokens and HTML string.
| Parameter | Type | Description |
|---|---|---|
code | string | - Source code to highlight |
language | Grammar | - Grammar definition |
optionsoptional | UseHighlightOptions | - Rendering options |
function CopyButton({ code, label, copiedLabel, classPrefix, onCopy, className, style, }: CopyButtonProps): react_jsx_runtime.JSX.ElementCopy-to-clipboard button for code blocks. Uses navigator.clipboard.writeText with execCommand fallback. Shows "Copied!" feedback for 2 seconds after click.
| Parameter | Type | Description |
|---|---|---|
{ code, label, copiedLabel, classPrefix, onCopy, className, style, } | CopyButtonProps |
function HighlightProvider({ children, theme, languages, classPrefix, lineNumbers, }: HighlightProviderProps): react_jsx_runtime.JSX.Element| Parameter | Type | Description |
|---|---|---|
{ children, theme, languages, classPrefix, lineNumbers, } | HighlightProviderProps |
function useHighlightContext(): HighlightContextValue
dist/react
Functions
function Highlight({ children, language, theme: themeProp, showLineNumbers, highlightLines, diffHighlight, copyButton, copyButtonLabel, copyButtonCopiedLabel, onCopy, classPrefix: classPrefixProp, className, style, }: HighlightProps): react_jsx_runtime.JSX.ElementComponent-mode syntax highlighter. Usage: ```tsx <Highlight language={javascript} theme="github-dark"> {`const x = 42;`} </Highlight> ```
| Parameter | Type | Description |
|---|---|---|
{ children, language, theme: themeProp, showLineNumbers, highlightLines, diffHighlight, copyButton, copyButtonLabel, copyButtonCopiedLabel, onCopy, classPrefix: classPrefixProp, className, style, } | HighlightProps |
function AutoHighlight({ children, languages: languagesProp, theme: themeProp, selector, lineNumbers: lineNumbersProp, classPrefix: classPrefixProp, className, style, autoDetect, }: AutoHighlightProps): react_jsx_runtime.JSX.ElementAuto-scan component that highlights all `<code>` elements within its children. Uses MutationObserver to watch for dynamically added content. Usage: ```tsx <AutoHighlight languages={[javascript, python]} theme="github-dark"> <article dangerouslySetInnerHTML={{ __html: markdownHtml }} /> </AutoHighlight> ```
| Parameter | Type | Description |
|---|---|---|
{ children, languages: languagesProp, theme: themeProp, selector, lineNumbers: lineNumbersProp, classPrefix: classPrefixProp, className, style, autoDetect, } | AutoHighlightProps |
function useHighlight(code: string, language: Grammar, options?: UseHighlightOptions): UseHighlightResult
Hook for syntax highlighting. Returns memoized tokens and HTML string.
| Parameter | Type | Description |
|---|---|---|
code | string | - Source code to highlight |
language | Grammar | - Grammar definition |
optionsoptional | UseHighlightOptions | - Rendering options |
function CopyButton({ code, label, copiedLabel, classPrefix, onCopy, className, style, }: CopyButtonProps): react_jsx_runtime.JSX.ElementCopy-to-clipboard button for code blocks. Uses navigator.clipboard.writeText with execCommand fallback. Shows "Copied!" feedback for 2 seconds after click.
| Parameter | Type | Description |
|---|---|---|
{ code, label, copiedLabel, classPrefix, onCopy, className, style, } | CopyButtonProps |
function HighlightProvider({ children, theme, languages, classPrefix, lineNumbers, }: HighlightProviderProps): react_jsx_runtime.JSX.Element| Parameter | Type | Description |
|---|---|---|
{ children, theme, languages, classPrefix, lineNumbers, } | HighlightProviderProps |
function useHighlightContext(): HighlightContextValue
dist/themes/dracula
Variables
Themedist/themes/dracula
Variables
Themedist/themes/github-dark
Variables
Themedist/themes/github-dark
Variables
Themedist/themes/github-light
Variables
Themedist/themes/github-light
Variables
Themedist/themes/monokai
Variables
Themedist/themes/monokai
Variables
Themedist/themes/night-owl
Variables
Themedist/themes/night-owl
Variables
Themedist/themes/nord
Variables
Themedist/themes/nord
Variables
Themedist/themes/one-dark
Variables
Themedist/themes/one-dark
Variables
Themedist/themes/solarized-dark
Variables
Themedist/themes/solarized-dark
Variables
Themedist/themes/solarized-light
Variables
Themedist/themes/solarized-light
Variables
Themedist/themes/tokyo-night
Variables
Themedist/themes/tokyo-night
Variables
Themedist/vanilla
Functions
function highlight(code: string, language: Grammar, options?: HighlightOptions): string
Highlight source code and return an HTML string.
| Parameter | Type | Description |
|---|---|---|
code | string | - Source code to highlight |
language | Grammar | - Grammar definition |
optionsoptional | HighlightOptions | - Rendering options |
function autoHighlight(options: ScanOptions): () => void
Auto-highlight: scan the page for code blocks and optionally observe for new ones.
| Parameter | Type | Description |
|---|---|---|
options | ScanOptions | - Scan options |
dist/vanilla
Functions
function highlight(code: string, language: Grammar, options?: HighlightOptions): string
Highlight source code and return an HTML string.
| Parameter | Type | Description |
|---|---|---|
code | string | - Source code to highlight |
language | Grammar | - Grammar definition |
optionsoptional | HighlightOptions | - Rendering options |
function autoHighlight(options: ScanOptions): () => void
Auto-highlight: scan the page for code blocks and optionally observe for new ones.
| Parameter | Type | Description |
|---|---|---|
options | ScanOptions | - Scan options |
Taxes calculated at checkout based on your location.