WORK-040
ID:WORK-040Status:done

Add syntax highlighting to plan site

Apply @refrakt-md/highlight to the plan render pipeline so code fences in plan content get proper syntax coloring. Currently code blocks render as plain <pre><code> with no highlighting.

Priority:mediumComplexity:moderateSource:SPEC-014
changeset-release/main View source

Criteria completion

No incremental history — criteria tracking started on Apr 19.

Relationships

Implements 1
Related 2
Branches 3
changeset-release/main current done
main doneclaude/file-naming-convention-LJdwR doneclaude/align-sidenav-styling-4MuxV done
History 5
  1. f2b3512
    Content editedby Claude
    Add {ID}-{slug}.md filename convention + migrate filenames subcommand
  2. 59ded4a
    Content editedby Claude
    Implement SPEC-037 plan package hardening: all 7 work items
  3. f262d7b
    Content editedby Claude
    Backfill source attributes on all 123 work items
  4. 4f81969
    Content editedby Claude
    Complete SPEC-014 work items (WORK-037 through WORK-041)
  5. f5b8bf8
    Created (done)by Claude
    Add work items WORK-037 through WORK-049 for plan site specs

Acceptance Criteria

  • @refrakt-md/highlight is added as a dependency of @refrakt-md/plan
  • createHighlightTransform() is applied after identity transform in the pipeline
  • Code fences with language annotations render with syntax highlighting
  • Highlight CSS is concatenated with the plan theme CSS
  • Light/dark mode works via CSS variables (inherited from plan theme)
  • Common plan content languages work: bash, json, typescript, markdown
  • Build output includes highlighted code (no client-side JS required)

Approach

After serialization and identity transform, run the highlight transform on the tree before passing it to renderFullPage(). The highlight transform exposes a .css property — append this to the theme stylesheet.

References

  • SPEC-014 (Plan Site via HTML Adapter)
  • WORK-039 (the refactored pipeline this plugs into)