Syntax Highlighted Code
highlight.js tokenization over YAML. Keys (hljs-attr) and string literals (hljs-string) — today these colors swap semantic meaning between light and dark themes (INC-006).
DO
Keep role-to-hue stable across themes — vary luminance, not hue (INC-006).
DON'T
Ship the default highlight.js dark stylesheet unchanged — audit each token role.
Design
light
scrape_interval: 15s
hljs-attr = green, hljs-string = blue, hljs-literal = blue.
dark
scrape_interval: 15s
hljs-attr = blue, hljs-string = green — swap must be eliminated.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
/* styles.css */
.hljs-attr { color: var(--doc-syntax-key); }
.hljs-string { color: var(--doc-syntax-string); }
[data-theme="dark"] .hljs-attr { color: var(--doc-syntax-key-dark); }Layout
| Property | Value |
|---|---|
| canonical-mapping | attr = green family, string = blue family, literal = brand-blue |
Accessibility
| Contrast | All four token colors pass AA on their respective backgrounds after INC-006 remediation. |