Skip to main content
View source

CodeBlock

Code panel with a mono toolbar, language label, and copy button.

Usage

svelte 
<script lang="ts">
  import { CodeBlock } from "@milandekruijf/ui/svelte";

  const code = "const answer = 42;";
</script>

<CodeBlock label="ts" {code} />

<!-- Or pass pre-rendered (e.g. Shiki) HTML instead: <CodeBlock html={shikiHtml} /> -->

Examples

Copyable code
ts 
export function add(a: number, b: number) {
  return a + b;
}
<script lang="ts">
  import { CodeBlock } from "@milandekruijf/ui/svelte";

  const example = `export function add(a: number, b: number) {
  return a + b;
}`;
</script>

<CodeBlock label="ts" code={example} />

Props

PropTypeDefaultDescription
label?string""
Toolbar text, typically the language name.
code?string""
Plain code; also the copy source and fallback panel.
html?string | nullnull
Pre-rendered (e.g. Shiki) panel HTML; replaces the plain code when set.
copyLabel?string"Copy"
Copy button text.
copiedLabel?string"Copied!"
Copy button confirmation text.
copyAriaLabel?string"Copy code"
Accessible name while idle.
copiedAriaLabel?string"Copied to clipboard"
Accessible name after copying.
class?string—
Extra classes merged after the base classes.