Studio
2

Code Block

Installation

pnpm dlx @mielui/svelte add code-block

The component depends on highlight.js . Install it if your project doesn't have it yet:

pnpm add highlight.js

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Double is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Pass a tabs array for the multi-language form, or code + lang for a single snippet:

Dynamic tab collections follow the current trigger order, including custom compositions. Removing or disabling the active trigger selects the first enabled trigger; copy actions and panel direction follow that selection.

A single snippet is a named code region. Multiple snippets use tabs and tab panels.

import { CodeBlock } from '$lib/mielui/components/code-block';

<CodeBlock
  value="javascript"
  tabs={[
    { label: 'Python',     lang: 'python',     code: pyCode },
    { label: 'JavaScript', lang: 'javascript', code: jsCode },
  ]}
/>

The built-in palette is GitHub light in light mode and GitHub dark in dark mode. For any other highlight.js theme, set theme="custom" and load its stylesheet. The component skips its own token colors:

import 'highlight.js/styles/github-dark.css';
import { CodeBlock } from '$lib/mielui/components/code-block';

<CodeBlock code={code} lang="typescript" theme="custom" />

Examples

Single snippet

Multiple languages

Line numbers

Custom actions

Copy placement: overlay

Copy placement: inline

Compound API

Custom theme: stylesheet

theme="custom" disables the built-in token colors. Load a highlight.js stylesheet or supply your own hljs-* rules. This example defines One Dark and One Light token colors.

Custom theme: variables

To keep the built-in palette and only shift its hues, override the --code-block-token-* variables on a wrapper. They inherit into the block per mode.

Copy and custom actions

CodeBlock.Copy copies the active snippet. Keep editor or run actions inside Actions and handle their result in your application. This example edits a local query and reports a simulated result; it does not connect to a database.

API reference

CodeBlock

Renders a high-level code block.

Prop Type Default
value Bindable string | undefined

Active tab id (bindable). Defaults to the first tab.

 —
tabs CodeBlockTab[] | undefined

High-level multi-language form.

 —
code string | undefined

Single-snippet shorthand (ignored when `tabs` is set).

 —
lang string | undefined

Language for the single-snippet shorthand.

 —
showLineNumbers boolean | undefined

Render a line-number gutter.

 false
copy CodeBlockCopyPlacement | undefined

Copy button placement: - `actionbar` (default): in the header's action cluster. - `overlay`: pinned to the top-right of the code body. - `inline`: a single-line body with the copy centered on the far right.

 'actionbar'
actions Snippet<[]> | undefined

Extra buttons placed left of the built-in copy button (high-level form).

 —
theme CodeBlockTheme | undefined

Syntax paint: - `mielui` (default): the built-in GitHub palette. - `custom`: no token colors; load any `highlight.js/styles/*` theme instead.

 'mielui'
class string | undefined —
children Snippet<[]> | undefined —

CodeBlock.Actions

Groups code block actions.

Prop Type Default
copy boolean | undefined

Append the built-in copy button after `children`.

 true
class string | undefined —
children Snippet<[]> | undefined —

CodeBlock.Content

Renders a code snippet panel.

Prop Type Default
value string | undefined

Tab id this panel belongs to.

 'default'
code Required string —
lang string | undefined —
showLineNumbers boolean | undefined false
copyPlacement "inline" | "overlay" | undefined

Render the copy button in/over this panel (`overlay` or `inline`).

 —
class string | undefined —
children Snippet<[]> | undefined —

CodeBlock.Copy

Copies the active code snippet.

Prop Type Default
label string | undefined 'Copy code'
copiedLabel string | undefined 'Copied'
class string | undefined —
children Snippet<[]> | undefined —

CodeBlock.Header

Renders the code block header.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

CodeBlock.List

Groups code language tabs.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

CodeBlock.Trigger

Selects a code language tab.

Prop Type Default
value Required string

Tab id; matches a `Content` value.

 —
disabled boolean | undefined false
class string | undefined —
children Snippet<[]> | undefined —