diff --git a/sx/sx/home-stepper.sx b/sx/sx/home-stepper.sx index 8c86965..4c80cc6 100644 --- a/sx/sx/home-stepper.sx +++ b/sx/sx/home-stepper.sx @@ -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))