CodeBlock
Syntax highlight via Shiki carregado lazy. O tema (light/dark) acompanha o ThemeProvider automaticamente.
example.tsxtsx
import { CodeBlock } from "@uttara-dev/ui/composite";
export function Example() {
return (
<CodeBlock
code={`const sum = (a: number, b: number) => a + b;`}
language="ts"
filename="utils/sum.ts"
/>
);
}bash
npm install @uttara-dev/ui
# ou
bun add @uttara-dev/uilong.tsts
// 30 linhas para mostrar scroll + numeração
console.log("linha 1");
console.log("linha 2");
console.log("linha 3");
console.log("linha 4");
console.log("linha 5");
console.log("linha 6");
console.log("linha 7");
console.log("linha 8");
console.log("linha 9");
console.log("linha 10");
console.log("linha 11");
console.log("linha 12");
console.log("linha 13");
console.log("linha 14");
console.log("linha 15");
console.log("linha 16");
console.log("linha 17");
console.log("linha 18");
console.log("linha 19");
console.log("linha 20");
console.log("linha 21");
console.log("linha 22");
console.log("linha 23");
console.log("linha 24");
console.log("linha 25");
console.log("linha 26");
console.log("linha 27");
console.log("linha 28");
console.log("linha 29");
console.log("linha 30");