Stepper: render tokenized code with syntax highlighting in SSR

Replace raw source <pre> with styled spans from build-code-tokens.
Each token gets its colour class, and tokens before the current
step get font-bold text-xs, tokens after get opacity-40.

Home page currently blocked by a separate Map key parse error.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-23 20:20:11 +00:00
parent 49b03b246d
commit ffe849df8e

View File

@@ -219,11 +219,22 @@
(update-code-highlight)
(run-post-render-hooks)))))))
(div :class "space-y-4"
;; Code view lake — client builds interactive spans, SSR shows source
;; Code view lake — SSR renders tokenized code with highlighting
(div (~cssx/tw :tokens "font-mono bg-stone-50 rounded p-2 overflow-x-auto leading-relaxed whitespace-pre-wrap")
:style "font-size:0.5rem"
(lake :id "code-view"
(pre :style "margin:0;white-space:pre-wrap;" source)))
(map (fn (tok)
(let ((step (get tok "step"))
(cur (deref step-idx))
(active (<= step cur))
(cls (str (get tok "cls")
(if (and active (>= step 0) (not (get tok "spread")))
" font-bold text-xs"
(if (and (not active) (>= step 0) (not (get tok "spread")))
" opacity-40"
"")))))
(span :class cls (get tok "text"))))
(deref code-tokens))))
;; Controls
(div :class "flex items-center justify-center gap-2 md:gap-3"
(button :on-click (fn (e) (do-back))