Skip to content

Highlight example code with the API documentation palette - #62

Merged
rosek86 merged 2 commits into
mainfrom
feat/example-syntax-highlighting
Oct 14, 2026
Merged

rosek86 merged 2 commits into
mainfrom
feat/example-syntax-highlighting

Conversation

@rosek86

@rosek86 rosek86 commented Oct 14, 2026 •

Copy link
Copy Markdown
Owner

Source panels in every gallery example now highlight TypeScript, TSX, and HTML with Shiki's dark-plus palette, matching the API reference. TypeDoc's existing light/dark palettes are explicitly configured to keep the choice visible.

HTML host snippets are formatted with Prettier before highlighting, restoring two-space indentation and readable element/attribute breaks even after production HTML minification. All example code panels use a consistent system monospace font.

The shared highlighter preserves copyable source and inserts token text through DOM APIs, so displayed HTML remains inert. Presentation dependencies stay outside the published library, and the basic example remains independently runnable.

Validation: npm run lint:fix, npm run format, npm run check, the Chromium browser suite plus a targeted rerun of the HTML regression (127 tests covered), focused highlighting/HTML tests in Firefox and WebKit, npm run check:example in all three engines, and a separate install/build of the basic example. Desktop and mobile screenshots were visually reviewed.

@rosek86
rosek86 merged commit 22eb04b into main Oct 14, 2026
5 checks passed
@rosek86
rosek86 deleted the feat/example-syntax-highlighting branch October 14, 2026 04:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant