YAML Code Block
Mantine CodeHighlight rendering the Prometheus YAML config on /config. 16px mono, transparent bg in light / dark bg in dark.
DO
Wrap in a Card for consistent page-chrome — see INC-005.
DON'T
Rely on the bare 'monospace' CSS keyword — see INC-008.
Design
default
global:
scrape_interval: 15s
scrape_configs:
- job_name: 'demo'Syntax-highlighted YAML with a floating copy button.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<CodeHighlight code={yaml} language="yaml" />Layout
| Property | Value |
|---|---|
| font-size | 16px code/block |
| font-family | var(--font-family-mono) mono |
| padding | 16px lg |
Accessibility
| ARIA | Copy Button carries aria-label; the pre is readable via Tab navigation. |
| Keyboard | Copy Button is a regular <button>. |