Carregando…

Advanced Code Block

Display

Code block with real Shiki syntax highlighting, filename and copy button.

Advanced Code Block — syntax highlighting real via Shiki

explanations.ts

export const explanations = {
  main: "Real Shiki syntax highlighting",
  detailed: "Theme fixed to github-dark, highlights on mount",
};

Instalação via CLI

$ npx kikitocn add advanced-code-block

Interno:

@/lib/utilsshiki

Exemplo de uso

Advanced Code BlockExample.tsx

import { AdvancedCodeBlock } from "@/components/ui/cn/advanced-code-block/AdvancedCodeBlock";

export function AdvancedCodeBlockExample() {
  return (
    <AdvancedCodeBlock code="Exemplo" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`code*`	`string`	—	Código a ser exibido
`filename`	`string`	`undefined`	Nome do arquivo exibido no topo
`language`	`BundledLanguage`	`'typescript'`	Linguagem pro highlight do Shiki
`theme`	`BundledTheme`	`'github-dark'`	Tema do Shiki
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Display

Carregando…