Super lightweight syntax highlighter
1export default function App() {2 return (3 <>4 <h1 id="title">5 Hello6 <span> world</span>7 </h1>8 <div style={styles.bar} />9 </>10 )11}1213use std::fmt::Display;/// Build a short Cartesian label for two displayable values.pub fn label<T: Display>(x: T, y: T) -> String { // format pair format!("({}, {})", x, y)}pub fn labels<I, T>(pairs: I) -> Vec<String>where I: IntoIterator<Item = (T, T)>, T: Display,{ pairs.into_iter().map(|(a, b)| label(a, b)).collect()}fn main() { let pts = vec![(1u32, 2u32), (3, 4)]; for line in labels(pts) { println!("point {line}"); } println!("{}", label("x", "y"));}def greet(names): # one name per line for n in names: print("hello, " + n)def shout(msg: str, times: int = 2) -> None: """Uppercase a message a few times.""" for _ in range(max(1, times)): print(msg.upper())def chunk(items, size): # simple batches for display for i in range(0, len(items), size): yield items[i : i + size]if __name__ == "__main__": greet(["ada", "linus"]) shout("sugar-high") print(list(chunk([1, 2, 3, 4, 5], 2))):root { --accent: #2d5e9d; --surface: #f6f8fa; --text: #24292f; --radius: 8px;}*,*::before,*::after { box-sizing: border-box;}body { margin: 0; font-family: system-ui, sans-serif; color: var(--text); background: var(--surface);}@media (prefers-color-scheme: dark) { :root { --surface: hsl(220 14% 12%); --text: #e6edf3; } .card { background: color-mix(in srgb, var(--surface) 92%, #000); border: 1px solid rgb(255 255 255 / 8%); }}/* motion */@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); }}.stack-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;}export const matchBoundary = (s) => /^[/][\w-]+[/]$/u.test(s)// Slashes in comments are not regex delimiters// path: /usr/local/bin/** @see https://example.com/docs/foo/bar */const afterBlock = /foo/g.exec('foo')?.[0]// Regex vs division (tokenizer stress test)const mixed = 12 / /\d+/.test('3') ? 1 : 0const expr = 100 - /50/.test('5') + 25const flags = ['g', 'i', 'm'].filter(Boolean).join('')const re = new RegExp('\\d+', flags)export function pickDelim(str) { const i = str.indexOf('/') return i < 0 ? str : str.slice(0, i) + str.slice(i + 1)}// trailing note: / is both operator and literal starterconsole.log(mixed, expr, re.test('99'))type Point = { readonly x: number; y: number }interface Cluster { center: Point members: ReadonlyArray<Point>}export const origin = { x: 0, y: 0 } as const satisfies Pointexport function distance(a: Point, b: Point): number { return Math.hypot(a.x - b.x, a.y - b.y)}export function nearest<T extends Point>( items: readonly T[], ref: Point): T | undefined { return items.reduce<T | undefined>((best, item) => { if (!best) return item const db = distance(best, ref) const di = distance(item, ref) return di < db ? item : best }, undefined)}export function bbox(points: readonly Point[]) { if (!points.length) return null let minX = Infinity let minY = Infinity let maxX = -Infinity let maxY = -Infinity for (const p of points) { minX = Math.min(minX, p.x) minY = Math.min(minY, p.y) maxX = Math.max(maxX, p.x) maxY = Math.max(maxY, p.y) } return { minX, minY, maxX, maxY }}