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
Acceptance Criteria
@refrakt-md/highlightis added as a dependency of@refrakt-md/plancreateHighlightTransform()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
- Plan Site via HTML Adapter (Plan Site via HTML Adapter)
- Refactor plan render pipeline to use @refrakt-md/html (the refactored pipeline this plugs into)