Summary
Code is the primary content of the docs, but it renders poorly site-wide for two reasons:
- 7 of 12 SDK languages aren't highlighted at all.
content.build.markdown.highlight.langs in nuxt.config.ts omits csharp, fsharp, java, kotlin, php, ruby, swift, so their grammars never load and code renders flat monochrome.
- The 5 supported languages are low-contrast. Tokens resolve the
material-theme-lighter (pastel) theme and sit on a tan bg-muted (#e8e1d3) code panel, giving sub-2:1 token contrast — well under WCAG AA.
Location(s)
- All
/<lang>/** docs code blocks.
- Unhighlighted:
csharp, fsharp, java, kotlin, php, ruby, swift.
- Low-contrast:
python, typescript, javascript, go, rust.
- Source:
nuxt.config.ts, app/assets/css/main.css (--code-bg).
Severity
P1 — major. Code legibility is core to a developer-docs site, and the highlighted path is a real WCAG contrast failure.
Evidence
Config (nuxt.config.ts):
langs: ['json','bash','typescript','javascript','python','rust','go','yaml','toml','http']
// missing: csharp, fsharp, java, kotlin, php, ruby, swift
DOM measurements:
/csharp/getting-started → <pre> has 58 token spans, ALL rgb(27,24,21) (single color = no highlighting)
/python/getting-started → keyword rgb(57,173,181) (material-theme-lighter teal)
on code panel rgb(232,225,211) (#e8e1d3 tan)
→ contrast 2.1:1 (AA needs 4.5:1)
Code panel uses bg-muted (#e8e1d3 tan) rather than the design's defined --code-bg (#fcfaf4).
Screenshot: .audit/evidence/audit-docs-1280-csharp-getting-started.png — C# block is flat monochrome on a heavy tan panel.
Suggested fix
- Add all 12 grammars to
highlight.langs (csharp, fsharp, java, kotlin, php, ruby, swift, …).
- Replace
material-theme-lighter with github-light (high-contrast) as the single light theme; align @nuxtjs/mdc and @nuxt/content highlight config so they don't diverge.
- Render code panels on
--code-bg (#fcfaf4) / --paper with a 1px solid #ddd5c5 border instead of tan bg-muted.
Acceptance criteria
Summary
Code is the primary content of the docs, but it renders poorly site-wide for two reasons:
content.build.markdown.highlight.langsinnuxt.config.tsomits csharp, fsharp, java, kotlin, php, ruby, swift, so their grammars never load and code renders flat monochrome.material-theme-lighter(pastel) theme and sit on a tanbg-muted(#e8e1d3) code panel, giving sub-2:1 token contrast — well under WCAG AA.Location(s)
/<lang>/**docs code blocks.csharp,fsharp,java,kotlin,php,ruby,swift.python,typescript,javascript,go,rust.nuxt.config.ts,app/assets/css/main.css(--code-bg).Severity
P1 — major. Code legibility is core to a developer-docs site, and the highlighted path is a real WCAG contrast failure.
Evidence
Config (
nuxt.config.ts):DOM measurements:
Code panel uses
bg-muted(#e8e1d3 tan) rather than the design's defined--code-bg(#fcfaf4).Screenshot:
.audit/evidence/audit-docs-1280-csharp-getting-started.png— C# block is flat monochrome on a heavy tan panel.Suggested fix
highlight.langs(csharp, fsharp, java, kotlin, php, ruby, swift, …).material-theme-lighterwithgithub-light(high-contrast) as the single light theme; align@nuxtjs/mdcand@nuxt/contenthighlight config so they don't diverge.--code-bg(#fcfaf4) /--paperwith a1px solid #ddd5c5border instead of tanbg-muted.Acceptance criteria
--code-bg, notbg-muted