Display

Code block

Shows code with its syntax colored, line numbers, lines you want noticed, and a copy button. It unrolls the first time it scrolls into view.

Installation

npx sinaui add code-block

Copy src/lib/ui/CodeBlock.svelte, Icon.svelte, announce.ts, scroll-edges.ts and tokens.css, then install TanStack Highlight:

pnpm add -E @tanstack/highlight@0.1.0

It's before version 1, so the version is exact: a newer one may change its API.

Examples

A file, with lines marked

highlight takes lines and ranges: “4-6”, or “3, 8-9”.

src/lib/astrolabe.ts

// The angle of a star above the horizon, from its hour angle and declination.
export function altitude(latitude: number, declination: number, hourAngle: number) {
	const rad = Math.PI / 180;
	const sin =
		Math.sin(latitude * rad) * Math.sin(declination * rad) +
		Math.cos(latitude * rad) * Math.cos(declination * rad) * Math.cos(hourAngle * rad);
	return Math.asin(sin) / rad;
}

// Maragheh observatory, Vega at its meridian.
altitude(37.39, 38.78, 0);

<script lang="ts">
	import CodeBlock from '#lib/ui/CodeBlock.svelte';

	const code = `// The angle of a star above the horizon, from its hour angle and declination.
export function altitude(latitude: number, declination: number, hourAngle: number) {
	const rad = Math.PI / 180;
	const sin =
		Math.sin(latitude * rad) * Math.sin(declination * rad) +
		Math.cos(latitude * rad) * Math.cos(declination * rad) * Math.cos(hourAngle * rad);
	return Math.asin(sin) / rad;
}

// Maragheh observatory, Vega at its meridian.
altitude(37.39, 38.78, 0);`;
</script>

<CodeBlock {code} lang="ts" filename="src/lib/astrolabe.ts" highlight="4-6" class="demo" />

<style>
	:global(.demo) {
		inline-size: min(40rem, 100%);
	}
</style>

A diff

Added lines in green, removed in red.

catalog.ts

  export const catalog = {
-   shelves: 12,
+   shelves: 14,
+   reading_rooms: ['Main hall', 'Manuscripts'],
    open: '08:00'
  };

<script lang="ts">
	import CodeBlock from '#lib/ui/CodeBlock.svelte';

	const code = `  export const catalog = {
-   shelves: 12,
+   shelves: 14,
+   reading_rooms: ['Main hall', 'Manuscripts'],
    open: '08:00'
  };`;
</script>

<CodeBlock {code} lang="diff" filename="catalog.ts" class="demo" />

<style>
	:global(.demo) {
		inline-size: min(40rem, 100%);
	}
</style>

A command

Without line numbers, for one-liners.

shell

npx sinaui add code-block

<script lang="ts">
	import CodeBlock from '#lib/ui/CodeBlock.svelte';
</script>

<CodeBlock code="npx sinaui add code-block" lang="shell" lineNumbers={false} class="demo" />

<style>
	:global(.demo) {
		inline-size: min(40rem, 100%);
	}
</style>

Props

Prop	Type	Default
`code`	`string`	required
`lang`	css, diff, go, html, js, json, python, shell, sql, svelte, ts, yaml	`'ts'`
`filename`	`string`
`highlight`	`string`: “3”, “3-5”, “3-5, 9”
`lineNumbers`	`boolean`	`true`

Accessibility

A region named after its file; it takes focus, so long lines can be scrolled from the keyboard.
Line numbers aren't read or copied, only the code.
Copying is announced; if the browser won't allow it, it says how to copy by hand.
With reduced motion it appears without unrolling.