Components
Themed Syntax Highlighter
Read-only syntax-highlighted text themed via design tokens, with search match highlighting and safe URL linkification
Installation
npx shadcn@latest add @dr-ui/themed-syntax-highlighterRegistry dependencies
@dr-ui/utils
Dependencies
react-syntax-highlighter@^16.1.1
@types/react-syntax-highlighter@^15.5.13
Basic
The built-in log grammar with token colors from the active theme and url tokens rendered as links.
2026-08-11 14:03:22.123 INFO Server listening on http://0.0.0.0:8080 (pid 4242)
2026-08-11 14:03:24.567 WARNING Retrying request 2/5 — upstream timeout after 30s
2026-08-11 14:03:25.891 ERROR Failed to load model "churn-v3": CUDA out of memory
2026-08-11 14:03:26.002 DEBUG Cache miss for key "user:1042:profile"Custom language
Register a custom Prism grammar with registerSyntaxHighlighterLanguage and pass it via the language prop.
# prediction server
server.port=8080
server.workers=4
model.name="churn-v3"
model.gpu=true # falls back to cpu when unavailableSearch highlight
Search matches are wrapped in mark elements, including matches spanning token boundaries. Pass the query already normalized (trimmed and lowercased).
2026-08-11 14:03:24.567 WARNING Retrying request 2/5 — upstream timeout after 30s
2026-08-11 14:03:25.891 ERROR Request to https://api.example.com/v2/predict failed: timeout