Plain

clamp.ts
export function clamp(n: number, lo: number, hi: number): number {
  if (n < lo) return lo;
  if (n > hi) return hi;
  return n;
}

With line numbers

clamp.ts
export function clamp(n: number, lo: number, hi: number): number {
  if (n < lo) return lo;
  if (n > hi) return hi;
  return n;
}

Line numbers + highlighted lines (highlight="2,3")

clamp.ts
export function clamp(n: number, lo: number, hi: number): number {
  if (n < lo) return lo;
  if (n > hi) return hi;
  return n;
}

Highlighted lines only (no gutter)

clamp.ts
export function clamp(n: number, lo: number, hi: number): number {
  if (n < lo) return lo;
  if (n > hi) return hi;
  return n;
}

Loaded from a file (src="mvc/view.ts")

view.ts
import type { State } from "./model";

export class TodoView {
  private onAdd?: (text: string) => void;
  constructor(private root: HTMLElement) {}

  bindAdd(cb: (text: string) => void): void { this.onAdd = cb; }

  render = (state: State): void => {
    this.root.innerHTML = `
      <ul>${state.todos.map((t) => `<li>${t}</li>`).join("")}</ul>
      <form><input name="t" autocomplete="off" /><button>Add</button></form>`;
    this.root.querySelector("form")!.addEventListener("submit", (e) => {
      e.preventDefault();
      const input = this.root.querySelector("input")!;
      this.onAdd?.(input.value);
      input.value = "";
    });
  };
}