CodeBlock

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

Import

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

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

Usage

<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
• Narrow
• Json
• Bash
• Go
• Sql
• Preset Brutal

Source

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