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.

main View source

Criteria completion

No incremental history — criteria tracking started on Apr 21.

Relationships

ID:SPEC-014Status:accepted

Plan Site via HTML Adapter

ID:WORK-039Status:done

Refactor plan render pipeline to use @refrakt-md/html

Priority:highComplexity:complex

ID:WORK-041Status:done

Add client behaviors to plan site

Priority:mediumComplexity:simple

main current done

claude/file-naming-convention-LJdwR done changeset-release/main done claude/align-sidenav-styling-4MuxV done

Apr 21, 01:46 PMe900a90
Created (done)by bjornolofandersson
Apr 10, 06:58 PMf262d7b
Content editedby Claude
Mar 23, 12:57 PM4f81969
statusready→done
by Claude
Mar 23, 12:51 PMf5b8bf8
Created (ready)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)