@generative-dom/plugin-highlight

Syntax-highlighted fenced code blocks for Generative DOM.

Installation

pnpm add @generative-dom/plugin-highlight

Usage

import { GenerativeDom } from '@generative-dom/core';
import { highlight } from '@generative-dom/plugin-highlight';
import { markdownCode } from '@generative-dom/plugin-markdown-code';

// Register highlight before markdown-code so it intercepts recognized languages first.
const md = new GenerativeDom(container, { plugins: [highlight(), markdownCode()] });
md.push('```typescript\nconst x: number = 1;\n```\n');

Matching

Matches fenced code blocks (``` or ~~~) whose language tag is one of the built-in supported languages. Unrecognized language tags fall through to @generative-dom/plugin-markdown-code.

Supported languages: javascript / js, typescript / ts, html, css, json, c, cpp / c++, bash / sh / shell / zsh, julia / jl, zig.

The plugin is pluggable — pass custom LangDef objects via highlight({ languages }) to add new languages, or highlight({ include }) to restrict the matched alias set. See docs/plugins/highlight.md for the full API.

```ts
const x = 1;

## Configuration

- priority: 95 (lower number than `markdown-code` at 100, so it runs first)
- level: block (default)
- matchDescriptor: `{ startChars: '`~', requiresSOL: true }`

## Rendered Output

Produces `<pre><code class="language-{lang}">` where the code content is broken into
`<span>` elements with `hl-*` class names:

| Class | Covers |
|-------|--------|
| `hl-keyword` | Language keywords |
| `hl-string` | String literals |
| `hl-comment` | Line and block comments |
| `hl-number` | Numeric literals |
| `hl-operator` | Operators (`=`, `+`, etc.) |
| `hl-punctuation` | Brackets, braces, commas |
| `hl-default` | Identifiers and whitespace |