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:
@@ -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))
|
||||
|
||||
Reference in New Issue
Block a user