Code Block
Code Block
A read-only, syntax-highlighted code block with a copy button and optional line numbers. Real TextMate-grammar highlighting (Shiki) across multiple languages, with a dark and a light built-in palette that follows the site's theme.
Default
interface Greeting { name: string times: number}class Greeter { private readonly prefix = "Hello" greet({ name, times }: Greeting): string { // repeat the greeting `times` times return Array.from({ length: times }, () => `${this.prefix}, ${name}!`).join(" ") }}const greeter = new Greeter()console.log(greeter.greet({ name: "world", times: 2 }))interface Greeting { name: string times: number}class Greeter { private readonly prefix = "Hello" greet({ name, times }: Greeting): string { // repeat the greeting `times` times return Array.from({ length: times }, () => `${this.prefix}, ${name}!`).join(" ") }}const greeter = new Greeter()console.log(greeter.greet({ name: "world", times: 2 }))With line numbers
1interface Greeting {2 name: string3 times: number4}56class Greeter {7 private readonly prefix = "Hello"89 greet({ name, times }: Greeting): string {10 // repeat the greeting `times` times11 return Array.from({ length: times }, () => `${this.prefix}, ${name}!`).join(" ")12 }13}1415const greeter = new Greeter()16console.log(greeter.greet({ name: "world", times: 2 }))171interface Greeting {2 name: string3 times: number4}56class Greeter {7 private readonly prefix = "Hello"89 greet({ name, times }: Greeting): string {10 // repeat the greeting `times` times11 return Array.from({ length: times }, () => `${this.prefix}, ${name}!`).join(" ")12 }13}1415const greeter = new Greeter()16console.log(greeter.greet({ name: "world", times: 2 }))17Title + highlighted line
HelloWorld.tsx
1export function HelloWorld() {2 const [count, setCount] = useState(0)34 return (5 <button onClick={() => setCount(count + 1)}>6 Clicked {count} times7 </button>8 )9}10HelloWorld.tsx
1export function HelloWorld() {2 const [count, setCount] = useState(0)34 return (5 <button onClick={() => setCount(count + 1)}>6 Clicked {count} times7 </button>8 )9}10Another language (language="python")
1class Greeter:2 def __init__(self, prefix: str = "Hello"):3 self.prefix = prefix45 def greet(self, name: str, times: int = 1) -> str:6 # repeat the greeting `times` times7 return " ".join(f"{self.prefix}, {name}!" for _ in range(times))89greeter = Greeter()10print(greeter.greet("world", times=2))111class Greeter:2 def __init__(self, prefix: str = "Hello"):3 self.prefix = prefix45 def greet(self, name: str, times: int = 1) -> str:6 # repeat the greeting `times` times7 return " ".join(f"{self.prefix}, {name}!" for _ in range(times))89greeter = Greeter()10print(greeter.greet("world", times=2))11npx shadcn add @ectopcoi-components/code-block