# CodeBlock

> Code with a language label, a copy button and a dependency-free syntax highlighter.

Source: https://ui.jcsoftdev.com/docs/components/code-block

Code with a language label, a copy button and a dependency-free syntax highlighter.

## Import

```ts
import { CodeBlock } from "@jcsoftdev/ui/ai";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/ai/code-block`.

## Usage

```tsx
<CodeBlock code={TS} language="ts" wrap={false} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `code` * | `string` |  |  |
| `language` | `string` |  | `ts`, `js`, `json`, `bash`, `go` or `sql` (aliases like `typescript` work); anything else is plain. |
| `filename` | `string` |  | Optional file name shown instead of the language label. |
| `wrap` | `boolean` |  | Wrap long lines instead of scrolling horizontally. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/ai-codeblock--default)
- [Narrow](/storybook/?path=/story/ai-codeblock--narrow)
- [Json](/storybook/?path=/story/ai-codeblock--json)
- [Bash](/storybook/?path=/story/ai-codeblock--bash)
- [Go](/storybook/?path=/story/ai-codeblock--go)
- [Sql](/storybook/?path=/story/ai-codeblock--sql)
- [Preset Brutal](/storybook/?path=/story/ai-codeblock--preset-brutal)

## Source

`packages/ui/src/ai/code-block/code-block.tsx`