in glass

A line is marked with a [!code highlight] comment on the line before it. The mark runs the full width and keeps a bar in the gutter, which is the part that survives scrolling a long line sideways.

const b = panBounds(view, fitted, band)
return { x: clamp(view.x, -b.x, b.x), y: clamp(view.y, -b.y, b.y), s: view.s }

A diff is [!code ++] and [!code --]. The sign is a real character in the gutter, not just a colour: colour alone is invisible to a reader who cannot separate red from green.

const b = panBounds(ctx.pose, ctx.fitted, ctx.band)
const dx = boundTick(wheelPx(input.deltaX, input.deltaMode, ctx.band.h))
w = { ...w, x: w.x - dx, y: w.y - dy } 
const x = clamp(w.raw0.x + w.x - dx, -b.x, b.x) 
const y = clamp(w.raw0.y + w.y - dy, -b.y, b.y) 
w = { ...w, x: x - w.raw0.x, y: y - w.raw0.y } 
effects.push({
  kind: "pose",
  pose: { ...ctx.pose, x: overshoot(w.raw0.x + w.x, b.x) }, 
  pose: { ...ctx.pose, x, y }, 
})

[!code focus] steps the rest of the block back. Hover to bring it all forward: a reader who wants the surrounding lines should not have to leave the page for them.

function swipeSlides(travel, slideW) {
  assert(slideW > 0, "a slide has no width")
  return Math.floor(Math.abs(travel) / slideW + 1 - SWIPE_COMMIT + 1e-9) 
}

[!code word:momentum] marks a word wherever it appears on the lines below.

// The momentum is the platform's; only the momentum knows when fingers left.

For source you do not own, and so cannot write a comment into, highlight="2,5-6" takes the lines from outside. This page uses it: an item page renders its demo file verbatim and must not edit it to document it.

import { Scrims } from "@/components/ui/scrims"

export default function Page() {
  return (
    <div className="px-6">
      {/* fixed to the viewport, so it lives outside the flow */}
      <Scrims top={false} />
      <article>…</article>
    </div>
  )
}

A shell block, with no filename: the tab falls back to the language.

npx shadcn add @ag/code
# the copy control comes with it