CodeBlock
Display code snippets with syntax highlighting.
Overview
Add a code block to your slide. You can use it to display code snippets with syntax highlighting in your slides.
Installation
pnpm dlx shadcn@latest add https://slide-cn.com/r/code-block.jsonnpx shadcn@latest add https://slide-cn.com/r/code-block.jsonyarn dlx shadcn@latest add https://slide-cn.com/r/code-block.jsonbunx --bun shadcn@latest add https://slide-cn.com/r/code-block.jsonDemo
A code block with syntax highlighting and line numbers
1function greet(name) {
2 console.log("Hello, " + name + "!");
3 return true;
4}
5
6const result = greet("World");Usage
import { CodeBlock } from "@/components/ui/slide-cn/code-block"
const sampleCode = `function greet(name) {
return "Hello, " + name;
}
console.log(greet("World"));`
export function FifthSlide() {
return (
<HeaderWithContent>
<HeaderWithContent.Header>Code Block Demo</HeaderWithContent.Header>
<HeaderWithContent.Content>
<div className="w-full max-w-3xl mx-auto">
<CodeBlock code={sampleCode} language="javascript" />
</div>
</HeaderWithContent.Content>
</HeaderWithContent>
)
}Reference
Prop
Type