Data Display

CodeBlock

Block container for multi-line source code with automatic syntax highlighting and a copy-to-clipboard control.

import { CodeBlock } from '@lostgradient/cinder/code-block';
codesnippet
01

Overview

Renders preformatted source code with optional client-side syntax highlighting and copy controls. The first paint may be the escaped plain-code fallback; when highlighting resolves, the block keeps the same layout metrics.

Usage

svelte 
<script lang="ts">
  import CodeBlock from '@lostgradient/cinder/code-block';
</script>

<CodeBlock />
Live preview
02

When to use

Use when
  • Displaying a multi-line code sample or terminal transcript inside documentation or chat.
  • Letting the reader copy a snippet to the clipboard via the copyable prop.
Avoid when
  • Annotating a single inline keystroke or shortcut — use kbd instead.
  • Rendering rich prose that happens to include code — embed it in markdown instead.
03

Examples

Basic code block

Multi-line preformatted code.

Delayed highlighting

Colorization can resolve after first paint while the code block keeps its dimensions.

With language label and copy

Header shows the language and a copy-to-clipboard button. Setting a language is all it takes — CodeBlock lazy-loads the bundled Shiki highlighter on the client and highlights automatically, no extra wiring.

04

Props

Props for code-block
Name Type Default Required Bindable Description
code text req The code to render.
language text Optional language label rendered in the header; also selects the grammar for highlighting.
highlight boolean Whether to highlight. Defaults to true whenever language is set. highlight={false} is an absolute off switch: it disables ALL highlighting — including an explicit highlighter prop — and triggers no Shiki import. The block renders the escaped plain <pre><code> fallback while keeping the language header label. When highlighting is enabled, client-side colorization may appear after first paint, but the block keeps stable layout metrics.
highlighter Highlighter Custom highlighter for this instance, used in place of the bundled Shiki default. Receives (code, language) and returns an HTML string (sync or async). When provided, the default highlighter is never imported.
copyable boolean false When true, render a copy button in the header.
languageLabelVisible boolean true Whether to render the language label in the header. Default true. Pass false to keep language-driven highlighting without the visible header chip; with copyable also unset, no header renders at all.