coop/rose-ash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stepper: render tokenized code with syntax highlighting in SSR

Browse Source 
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:
giles
2026-03-23 20:20:11 +00:00
parent 49b03b246d
commit ffe849df8e
1 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
sx/sx/home-stepper.sx
View File

@@ -219,11 +219,22 @@
(update-code-highlight) (update-code-highlight)
(run-post-render-hooks))))))) (run-post-render-hooks)))))))
(div :class "space-y-4" (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") (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" :style "font-size:0.5rem"
(lake :id "code-view" (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 ;; Controls
(div :class "flex items-center justify-center gap-2 md:gap-3" (div :class "flex items-center justify-center gap-2 md:gap-3"
(button :on-click (fn (e) (do-back)) (button :on-click (fn (e) (do-back))