Browse components

CodeBlock

Syntax-highlighted code block with a copy button.

atoms

Live example

Default usage you can copy and adapt.

Basic Code Block

Simple code block with syntax highlighting

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

With Line Numbers

Code block with line numbers

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

Pre-highlighted HTML

Pass trustHtml when code contains markup from your highlighter

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

Props

The props you are most likely to need, with types and defaults.

Props / API
NameTypeRequiredDefaultDescription
codestringYes—Source to display.
languagestringNosvelteLanguage label for the header.
showCopyButtonbooleanNotrueShow the copy button.
trustHtmlbooleanNofalseRender the code as HTML. Only for trusted, sanitised input.