CodeBlock Component

The CodeBlock component renders syntax-highlighted code with copy functionality and language detection.

Import

import { CodeBlock } from 'aichatkit'

Usage

Basic Example

basic-code-block.tsx

import { CodeBlock } from 'aichatkit'
 
function BasicCodeBlock() {
  const code = `
function greet(name) {
  console.log(\`Hello, \${name}!\`)
}
  `
 
  return (
    <CodeBlock 
      code={code}
      language="javascript"
    />
  )
}

With Copy Button

code-block-with-copy.tsx

<CodeBlock 
  code={code}
  language="typescript"
  showCopyButton={true}
  showLineNumbers={true}
  onCopy={() => console.log('Code copied!')}
/>

API Reference

Props

Prop	Type	Default	Description
`code`	`string`	-	Code content to display
`language`	`string`	`'text'`	Programming language for syntax highlighting
`showCopyButton`	`boolean`	`true`	Show copy to clipboard button
`showLineNumbers`	`boolean`	`false`	Show line numbers
`highlightLines`	`number[]`	`[]`	Array of line numbers to highlight
`filename`	`string`	-	Optional filename to display
`onCopy`	`() => void`	-	Callback when code is copied
`className`	`string`	-	Additional CSS classes

Supported Languages

The CodeBlock component supports syntax highlighting for:

JavaScript/TypeScript
Python
Java
C/C++
Go
Rust
PHP
Ruby
Swift
Kotlin
And many more...

Examples

With Filename

<CodeBlock 
  code={code}
  language="typescript"
  filename="example.ts"
/>

With Highlighted Lines

<CodeBlock 
  code={code}
  language="javascript"
  highlightLines={[1, 3, 5]}
/>

The CodeBlock component automatically detects the language if not specified and provides appropriate syntax highlighting.

MarkdownRenderer MessageActions