CodeBlock
A code block: highlighted, copyable, and themed like everything else.
Walkthrough
1. Basic
Highlighted with theme tokens rather than a library — no Prism, no Shiki, no innerHTML. Every token is a real element, so it re-hues with everything else and a muted theme gets muted code.
totals.ts TypeScript
import { Button, Card, CardContent } from 'omaris';export function total(rows: Row[]) { return rows.reduce((sum, row) => sum + row.amount, 0);}// A tone is a colour role; a variant is a fill style.const props = { variant: 'tonal', tone: 'success' } as const;<script lang="ts"> import { CodeBlock } from 'omaris'; const CODE = `import { Button, Card, CardContent } from 'omaris';export function total(rows: Row[]) { return rows.reduce((sum, row) => sum + row.amount, 0);}// A tone is a colour role; a variant is a fill style.const props = { variant: 'tonal', tone: 'success' } as const;`;</script><div class="w-full max-w-xl"> <CodeBlock code={CODE} lang="ts" title="totals.ts" /></div>2. Line numbers and highlight
lineNumbers and highlight when the prose beside the block points at a line — "see line 4" needs a 4 on the page.
export function cn(...inputs) { return twMerge(clsx(inputs));}// The class prop is merged last, so it always wins.const classes = cn(buttonVariants({ variant }), className);<script lang="ts"> import { CodeBlock } from 'omaris'; const CODE = `export function cn(...inputs) { return twMerge(clsx(inputs));}// The class prop is merged last, so it always wins.const classes = cn(buttonVariants({ variant }), className);`;</script><div class="w-full max-w-xl"> <CodeBlock code={CODE} lang="ts" lineNumbers highlight="5-6" /></div>3. Diff and collapse
diff reads the leading + and - as signs rather than code. collapse shows that many lines with a control to open the rest.
vite.config.ts TypeScript
import adapter from '@sveltejs/adapter-auto';import adapter from '@sveltejs/adapter-static';export default defineConfig({ plugins: [ sveltekit({ adapter: adapter() adapter: adapter(), prerender: { handleMissingId: 'fail' } }) ]});<script lang="ts"> import { CodeBlock } from 'omaris'; const DIFF = `-import adapter from '@sveltejs/adapter-auto';+import adapter from '@sveltejs/adapter-static'; export default defineConfig({ plugins: [ sveltekit({- adapter: adapter()+ adapter: adapter(),+ prerender: { handleMissingId: 'fail' } }) ] });`;</script><div class="w-full max-w-xl"> <CodeBlock code={DIFF} lang="ts" diff collapse={8} title="vite.config.ts" /></div>4. Variants
ghost has no frame, for code already inside a bordered surface.
bun add omarisbun add omarisbun add omaris<script lang="ts"> import { CodeBlock } from 'omaris';</script><div class="flex w-full max-w-xl flex-col gap-4"> <CodeBlock code="bun add omaris" lang="bash" variant="outlined" /> <CodeBlock code="bun add omaris" lang="bash" variant="filled" /> <CodeBlock code="bun add omaris" lang="bash" variant="ghost" size="sm" copy={false} /></div>