CodeBlock
Syntax highlight via Shiki carregado lazy. O tema (light/dark) acompanha o ThemeProvider automaticamente.
highlighter={null} — monocromático (padrão do pacote, zero payload)
setup.tsts
// uma vez, no cliente da aplicação
import {
registerCodeHighlighter,
setDefaultCodeHighlighter,
createPrismHighlighter,
} from "@uttara-dev/ui/composite";
registerCodeHighlighter("prism", createPrismHighlighter({ load: () => import("prismjs") }));
setDefaultCodeHighlighter("prism");highlighter="prism" — leve, cores derivadas do tema
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"
highlighter="prism"
/>
);
}highlighter="shiki" — fidelidade de editor, com numeração de linhas
long.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");