Components / Data & content

Code

Component + manager

Renders preformatted code content with a copy button.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentCode

Managercreate_code_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Code, create_code_manager } from "sveltekit-ui"

  const manager = create_code_manager({
    language: "javascript",
    content: "const greeting = 'Hello, Svelte!'",
  })
</script>

<Code {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

2 entries in configuration

Property	Type	Default	Description
`content`	`any`	`null`	the code content to display, can be string or object
`language`	`string`	`null`	optional label indicating the code language