Add lazy-loaded syntax highlighting with terminal-style code blocks

[HamptonMakes]

Why

Fenced code blocks in plans rendered as flat monochrome text. Plans are dense with service code, schemas, and rollout commands — they deserve real highlighting, without shipping a pile of JS for languages nobody uses or breaking inline comment anchoring.

What

• New syntax_highlight Stimulus controller: highlight.js core + per-language grammars lazy-loaded from jsDelivr only when a tagged fence actually appears on the page; unknown languages stay plain
• Comment anchors re-anchor after highlighting (and Mermaid) rewrites, so review pinning survives token spans
• Dark mode: near-black code background with a One Dark-inspired palette (replacing the blue-heavy GitHub Dark colors); Hack leads the monospace stack
• Terminal-style sticky header (traffic-light dots + language name) on tagged fences only, drawn as a pure-CSS ::before so DOM/text is untouched — untagged fences and Mermaid get none
• Agent instructions now tell agents to tag fences with canonical highlight.js language names
• Seed walkthrough doc exercises Ruby, TypeScript, SQL, Bash, diff, Mermaid, an untagged fence, and a blockquote

Risk Assessment

Low — rendering-only changes scoped to the markdown view layer; highlighting failures degrade to plain code blocks. Full suite green (1318 examples, 0 failures).

Generated with Amp

[Copilot]

Pull request overview

Adds client-side, lazy-loaded syntax highlighting for fenced code blocks in plan Markdown while preserving comment-anchor behavior after DOM rewrites (highlighting + Mermaid). This fits the CoPlan “native-feel, secretly HTML” UI goal by improving readability without bundling large JS payloads up front.

Changes:

• Wrap rendered Markdown with a new coplan--syntax-highlight Stimulus controller that loads highlight.js core + per-language grammars on demand from jsDelivr and dispatches a “settled” event for re-anchoring comment highlights.
• Unify post-transform re-anchoring by replacing handleMermaidSettled with handleContentSettled and wiring both Mermaid and highlighting “settled” events to it.
• Update styling and docs: terminal-style language header on tagged fences, Hack as the primary monospace font, and expanded agent instructions + seed content to exercise multiple language fences.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
spec/helpers/markdown_helper_spec.rb	Updates expectation to include both Mermaid + syntax-highlighting controllers on rendered Markdown wrapper.
engine/app/views/layouts/coplan/application.html.erb	Adds jsDelivr preconnect to support external font/grammar/Mermaid loads.
engine/app/views/coplan/plans/show.html.erb	Wires both Mermaid and highlighting “settled” events to the updated text-selection handler.
engine/app/views/coplan/agent_instructions/show.text.erb	Instructs agents to tag fenced code blocks using highlight.js canonical language names.
engine/app/javascript/controllers/coplan/text_selection_controller.js	Renames/expands the post-transform handler to cover Mermaid + syntax highlighting DOM rewrites.
engine/app/javascript/controllers/coplan/syntax_highlight_controller.js	New Stimulus controller: lazy-load highlight.js + grammars and rewrite code blocks, then dispatch a re-anchor event.
engine/app/helpers/coplan/markdown_helper.rb	Bumps markdown render cache version and adds syntax-highlighting controller to the rendered wrapper.
engine/app/assets/stylesheets/coplan/application.css	Adds Hack font-face, code-block theming variables, terminal-style language header, and highlight.js token color mapping.
db/seeds/development.rb	Adds a development seed fixture that exercises multiple fenced languages (Ruby/TS/SQL/Bash/diff/Mermaid + untagged).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.