Component
CodeBlock
Syntax-highlighted code display with copy functionality and line numbers.
tsx
import { CodeBlock } from 'wss3-forge'Usage
•
Use for displaying code snippets
•
Supports multiple languages (tsx, js, css, bash, etc.)
•
Add showLineNumbers for longer code
•
Copy button enabled by default
•
Optional title for context
typescript
1const greeting = "Hello World"2console.log(greeting)MyComponent.tsx
1function MyComponent() {2 const [count, setCount] = useState(0)3 return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>4}Examples
Basic Code Block
typescript
1const greeting = "Hello World"2console.log(greeting)tsx
1<CodeBlock2 code={`const greeting = "Hello World"3console.log(greeting)`}4 language="typescript"5/>With Line Numbers
MyComponent.tsx
1function MyComponent() {2 const [count, setCount] = useState(0)3 4 return (5 <button onClick={() => setCount(c => c + 1)}>6 Count: {count}7 </button>8 )9}tsx
1<CodeBlock2 code={code}3 language="tsx"4 showLineNumbers5 title="MyComponent.tsx"6/>Previous
VideoPlayer
Next
CopyButton
Last updated: December 2025