Homepage code samples render unhighlighted + console 404 from runtime MDC highlight endpoint

[nficano]

Summary

The homepage renders its code samples through the runtime <MDC> component (HomeCodeSample.vue, plus the section-body <MDC> calls in pages/index.vue). At render time MDC fetches the internal highlight API, which 404s, so the home job.submit JSON sample falls back to plain, unhighlighted monochrome text and every homepage load emits a console error. Docs pages are unaffected — they use <ContentRenderer> with build-time Shiki and highlight correctly.

This is the flagship landing page; the unstyled code block and devtools error undercut credibility at launch.

Location(s)

• / (homepage) — #how section job.submit sample (and any <MDC>-rendered fenced code)
• All breakpoints
• Source: app/components/HomeCodeSample.vue (<MDC :value="fenced">), app/pages/index.vue

Severity

P1 — major. (Per the audit rubric a console error on page load is a P0 trigger; downgraded to P1 because the page still renders and remains usable — the defects are an unstyled code block + a non-fatal console error.)

Evidence

Console error on every / load:

[ERROR] [request error] [fatal] [GET] http://localhost/api/_mdc/highlight?code=%7B...%7D&lang=json&theme=%7B%22light%22:%22material-theme-lighter%22,%22default%22:%22github-light%22,%22dark%22:%22github-dark%22%7D
ℹ Error: Page not found        (statusCode: 404, fatal: true)
  at setup (app/pages/[...slug].vue:33:50)

Note the requested theme {"light":"material-theme-lighter",...} — the @nuxtjs/mdc default light theme, which is not the { default: github-light, dark: github-dark } configured for @nuxt/content in nuxt.config.ts. The two modules' highlight configs diverge, and the runtime endpoint the MDC path expects isn't served (/api/_mdc/highlight → 404).

DOM comparison (home vs docs):

home  /  → section#how <pre> token spans: 0   (plain text, no coloring)
docs  /python/getting-started → python <pre> token spans: 269 (computed color rgb(57,173,181))

Screenshot: .audit/evidence/audit-home-code-unhighlighted-1280.png — the job.submit JSON block renders monochrome, unlike colored docs code.

Suggested fix

• Render the home code sample with build-time highlighting instead of runtime <MDC> (e.g. store the snippet as a content fenced block rendered via <ContentRenderer>, or pre-highlight at build), or ensure the /api/_mdc/highlight runtime route is registered in the deployed build.
• Align @nuxtjs/mdc and @nuxt/content highlight config (same themes/langs) so no material-theme-lighter request is made.

Acceptance criteria

• Homepage job.submit sample is syntax-highlighted, matching docs code styling
• No console errors on / load (no /api/_mdc/highlight 404)
• Highlight theme is consistent between home (MDC) and docs (content)