@lezer/highlight

@lezer/highlight is the syntax highlighting layer of the Lezer parser system used by CodeMirror. It defines a mostly closed vocabulary of highlighting tags, lets language packages associate tree nodes with those tags, and provides highlighters that turn tagged nodes into CSS classes or inline styles.

Rather than matching raw token strings, it works over structured Lezer parse trees, so highlighting stays consistent across languages and themes. It ships as a tiny, dependency-light TypeScript library that powers highlighting for every CodeMirror 6 language mode.

What You Get

• A closed, extensible vocabulary of highlighting tags (tags) shared across all Lezer languages
• styleTags to associate syntax tree node types with highlighting tags in a language grammar
• tagHighlighter and the ready-made classHighlighter for turning tags into CSS classes
• highlightTree and highlightCode to walk a parse tree and emit styled ranges or DOM
• Tag modifiers and inheritance so themes can fall back from specific to general tags

Common Use Cases

• Adding syntax highlighting to a CodeMirror 6 editor via a language package
• Authoring a new Lezer language mode that exposes highlighting metadata
• Rendering static, highlighted code snippets outside an editor with highlightCode
• Building custom editor themes that map highlighting tags to CSS classes

Under The Hood

Architecture - The entire library lives in a single src/highlight.ts module built around a Tag class whose instances form a specificity-ordered set of parent tags, with Modifier instances lazily generating modified tags and caching them via a power-set of parent configurations. styleTags compiles a selector spec into a Rule linked list stored on nodes through a ruleNodeProp NodeProp; highlightTree and highlightCode then drive a HighlightBuilder that walks the tree with a TreeCursor, resolves the active tags via getStyleTags, and calls a Highlighter to emit class names for each styled range. Tech Stack - Written in TypeScript targeting both ESM and CommonJS (dist/index.js and dist/index.cjs), its only runtime dependency is @lezer/common for tree and NodeProp primitives, and it builds with @marijn/buildtool and TypeScript 5. Code Quality - The code is dense but carefully commented with /// doc comments feeding the generated API reference, uses precise readonly types and internal markers, and favors small pure helpers (sameArray, powerSet); there is no test directory in the repository, so correctness relies on the broader Lezer/CodeMirror integration suite rather than local unit tests. API Design - The public surface is small and composable - tags, styleTags, tagHighlighter/classHighlighter, and highlightTree/highlightCode - with a closed tag vocabulary and inheritance that lets themes cover many languages with minimal boilerplate, though understanding the tag/modifier model takes some reading of the reference docs.