Code Block

A syntax-highlighted code block with filename, line numbers, and copy button.

hello.ts

function greet(name: string): string {
  return "Hello, " + name + "!";
}

console.log(greet("World"));

Installation


$ pnpm dlx shadcn@latest add @slidecn/code-block

Usage

import CodeBlock from "@/components/slides/code-block";
 
function MyPresentation() {
  return (
    <Deck>
      <CodeBlock
        language="python"
        lineNumbers="1|3-5"
        filename="main.py"
        showCopy={true}
      >
        {`def hello():
    print("Hello, world!")`}
      </CodeBlock>
    </Deck>
  );
}

API Reference

CodeBlock

Prop	Type	Default	Description
`language`	`string`	required	Code language
`children`	`string`	required	Code content
`lineNumbers`	`boolean \| string`	-	Show or configure line numbers
`filename`	`string`	-	Display filename in header
`showCopy`	`boolean`	`true`	Show copy button
`autoAnimateId`	`string`	-	Auto-animate data ID
`startFrom`	`number`	-	Starting line number
`trim`	`boolean`	`true`	Trim whitespace

Team Slide Fragment List

On This Page

Installation Usage API Reference CodeBlock

Edit this page Follow @shadcnlabs Join community