Syntax highlighter

@summonware/ui · syntax-highlighter · P3 · Advanced UI

Usage

Language-aware code highlighting over Prism (MIT) — the same engine this docs site itself uses for every example's code panel, exposed as a reusable component rather than kept as internal-only plumbing.

import { SyntaxHighlighter } from '@summonware/ui';

Best practices

DoSet `language` accurately — Prism's grammar rules are per-language; the wrong one produces plausible-looking but wrong highlighting.

Don'tUse this for content a user might paste untrusted HTML into. `code` is trusted, caller-supplied source, not sanitised input from a request — the same trust boundary `RichTextEditor` documents for its own HTML rendering.

Examples

Common configurations, variations and states.

TSX snippet

export function Button({ variant = 'solid', children }: ButtonProps) {
  return (
    
  );
}

A real component, highlighted for its actual language.

Reference variants

1 of 5 labels from the reference are demonstrated above.

Basic UsageHTML MarkupCSS MarkupLine NumberLine Highlight