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:moderate
claude/align-sidenav-styling-4MuxV View source

Criteria completion

No incremental history — criteria tracking started on Apr 17.

Relationships

Implements 1
Related 2
Branches 3
claude/align-sidenav-styling-4MuxV current done
main doneclaude/file-naming-convention-LJdwR donechangeset-release/main done
History 2
  1. 4f81969
    Content editedby Claude
    Complete SPEC-014 work items (WORK-037 through WORK-041)
  2. 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)