Skip to content

Docs code blocks render hard to read — 7 SDK languages unhighlighted, the rest low-contrast on a tan panel #17

@nficano

Description

@nficano

Summary

Code is the primary content of the docs, but it renders poorly site-wide for two reasons:

  1. 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.
  2. 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

  • Every SDK's code blocks are syntax-highlighted (no monochrome blocks)
  • Token contrast ≥ 4.5:1 against the code panel
  • Code panel uses --code-bg, not bg-muted

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingdocsp1ui

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions