What problem does it solve? Syntax highlighters that return markup strings force you to inject HTML into the DOM, which does not fit component-based renderers, inline-styled emails, or parsed markdown documents. This Skill documents @sdxc/highlight, which returns typed Token arrays instead, so code blocks can be rendered as elements, painted inside a markdown walk, or themed through CSS custom properties. ## Core Features & Use Cases - Token-based highlighting: tokenize(code, language) returns Token[] for component rendering, while highlight returns escaped <span> markup for string-based callers. - Markdown integration: The @sdxc/highlight/markdown visitor paints every fenced code block during a Markdown.walk, filling Markdown.Code.tokens synchronously. - Theming and custom grammars: A stylesheet keyed to --highlight-<type> custom properties handles colors, and scan/compose let you write grammars for unsupported languages. - Use Case: While rendering a parsed markdown document as components, spread the highlight visitor into your walk so every code fence is tokenized in the same pass that rewrites links, with no extra async step. ## Quick Start Add @sdxc/highlight as a workspace dependency and use the skill's guidance to tokenize a code string or paint code blocks in a markdown document.
